30:T759,// // Example using Multiple render targets and FBO from the picoGL tutorial // See also https://observablehq.com/@esperanc/picogl-tutorial-part-ii-b // fboAndMRTtest = { const vertexShader = `#version 300 es layout(location=0) in vec4 position; out vec2 vUV; void main() { vUV = position.xy * 0.5 + 0.5; gl_Position = position; }`; const fragShaderMRT = `#version 300 es precision highp float; layout(location=0) out vec4 fragColor1; layout(location=1) out vec4 fragColor2; void main() { fragColor1 = vec4(1.0, 0.0, 0.0, 1.0); fragColor2 = vec4(0.0, 0.0, 1.0, 1.0); }`; const fragShaderBlend = `#version 300 es precision highp float; in vec2 vUV; uniform sampler2D texture1; uniform sampler2D texture2; out vec4 fragColor; void main() { vec4 color1 = texture(texture1, vUV); vec4 color2 = texture(texture2, vUV); fragColor = mix(color1, color2, vUV.x); }`; const testStep1 = gl2helper({ vertexShader, fragmentShader: fragShaderMRT, attributes: { position: [ [-0.5, -0.5], [0.5, -0.5], [0.0, 0.5] ] }, fbos: [2], primitive: "triangles" }); const testStep2 = gl2helper({ vertexShader, fragmentShader: fragShaderBlend, primitive: "triangle_fan", app: testStep1.app, canvas: testStep1.canvas, attributes: { position: [ [-1, -1], [-1, 1], [1, 1], [1, -1] ] } }); testStep1.useFbo(0).clearColor(0.8, 0.8, 0.8, 1).clear().draw(); testStep2 .texture("texture1", testStep1.fboObjects[0].colorAttachments[0]) .texture("texture2", testStep1.fboObjects[0].colorAttachments[1]) .useFbo(null) .draw(); return testStep1.canvas; }31:T4a5,{ let [angleX, angleY] = [0, 0]; let { mat4, vec3 } = glmatrix; let rotateMatrix = mat4.create(); let modelMatrix = mat4.create(); const canvas = cubeApp.canvas; let refresh = () => { cubeApp.uniform("uModel", modelMatrix); cubeApp.clear(); cubeApp.draw(); }; let projMatrix = mat4.create(); mat4.perspective( projMatrix, Math.PI / 2, canvas.width / canvas.height, 0.1, 100.0 ); let viewMatrix = mat4.create(); let eyePosition = [0, 0, 3, 1]; mat4.lookAt(viewMatrix, eyePosition, [0, 0, 0], [0, 1, 0]); let viewProjMatrix = mat4.create(); mat4.multiply(viewProjMatrix, projMatrix, viewMatrix); let lightPosition = [0.5, 0.5, 10, 1]; cubeApp .uniform("viewProj", viewProjMatrix) .uniform("eyePosition", eyePosition) .uniform("lightPosition", lightPosition) .depthTest(true); yield canvas; for (let frame = 0; frame >= 0; frame++) { mat4.fromRotation(rotateMatrix, 0.01, [1, 0, 0]); mat4.multiply(modelMatrix, rotateMatrix, modelMatrix); mat4.fromRotation(rotateMatrix, 0.01, [0, 1, 0]); mat4.multiply(modelMatrix, rotateMatrix, modelMatrix); refresh(); yield canvas; } }32:T6c2,cubeApp = { const vertexShader = `#version 300 es layout(location=0) in vec3 position; layout(location=1) in vec2 uv; layout(location=2) in vec3 normal; uniform mat4 viewProj; uniform vec4 eyePosition; uniform vec4 lightPosition; uniform mat4 uModel; out vec3 vPosition; out vec2 vUV; out vec3 vNormal; void main() { vec4 worldPosition = uModel * vec4(position, 1.); vPosition = worldPosition.xyz; vUV = uv; vNormal = (uModel * vec4(normal,0.)).xyz; gl_Position = viewProj * worldPosition; } `; const fragmentShader = `#version 300 es precision highp float; uniform mat4 viewProj; uniform vec4 eyePosition; uniform vec4 lightPosition; uniform sampler2D tex; in vec3 vPosition; in vec2 vUV; in vec3 vNormal; out vec4 fragColor; void main() { vec3 color = texture(tex, vUV).rgb; vec3 normal = normalize(vNormal); vec3 eyeVec = normalize(eyePosition.xyz - vPosition); vec3 incidentVec = normalize(vPosition - lightPosition.xyz); vec3 lightVec = -incidentVec; float diffuse = max(dot(lightVec, normal), 0.0); float highlight = pow(max(dot(eyeVec, reflect(incidentVec, normal)), 0.0), 100.0); float ambient = 0.1; fragColor = vec4(color * (diffuse + highlight + ambient), 1.0); //fragColor = vec4(vNormal, 1.0); } `; return gl2helper({ vertexShader, fragmentShader, attributes: objToAttributes( await FileAttachment("texturedCube@14.obj").text() ), textures: { tex: await FileAttachment("webgl-logo.png").image() }, primitive: "triangles" }); }33:Td51,// // A webgl2 helper based on picogl. // gl2helper = function (options = {}) { const { vertexShader = `#version 300 es layout(location=0) in vec4 position; layout(location=1) in vec2 texCoord; out vec2 uv; void main() { uv = texCoord; gl_Position = position; }`, fragmentShader = `#version 300 es precision highp float; in vec2 uv; out vec4 fragColor; void main() { fragColor = vec4(vec3(length(uv)/sqrt(2.)),1.); }`, textures = {}, attributes = { position: [ [-1, -1], [-1, 1], [1, 1], [1, -1] ], texCoord: [ [0, 0], [0, 1], [1, 1], [1, 0] ] }, fbos = null, primitive = "triangle_fan", count = 4 } = options; const canvas = options.canvas ? options.canvas : options.app ? options.app.canvas : DOM.canvas(800, 600); const app = options.app || picogl.createApp(canvas, { preserveDrawingBuffer: true }); const attributeBuffers = {}; const vertexArray = app.createVertexArray(); let attrCount = 0; for (let attr of Object.keys(attributes)) { const avalue = attributes[attr]; const elsize = avalue[0].length || 1; const floatArray = new Float32Array(avalue.flat()); attributeBuffers[attr] = app.createVertexBuffer( picogl.FLOAT, elsize, floatArray ); vertexArray.vertexAttributeBuffer(attrCount++, attributeBuffers[attr]); } const program = app.createProgram(vertexShader, fragmentShader); const drawCall = app.createDrawCall(program, vertexArray); const textureObjects = {}; for (let texName of Object.keys(textures)) { textureObjects[texName] = app.createTexture2D(textures[texName], { flipY: true, maxAnisotropy: picogl.WEBGL_INFO.MAX_TEXTURE_ANISOTROPY, minFilter: app.gl.LINEAR, maxFilter: app.gl.LINEAR }); drawCall.texture(texName, textureObjects[texName]); } let fboObjects = []; if (fbos) { for (let iFbo = 0; iFbo < fbos.length; iFbo++) { fboObjects[iFbo] = app.createFramebuffer(); for (let iTarget = 0; iTarget < fbos[iFbo]; iTarget++) { let colorTarget = app.createTexture2D(app.width, app.height, { minFilter: app.gl.LINEAR, maxFilter: app.gl.LINEAR }); fboObjects[iFbo].colorTarget(iTarget, colorTarget); } } } drawCall.primitive( { triangle_fan: app.gl.TRIANGLE_FAN, points: app.gl.POINTS, lines: app.gl.LINES, line_strip: app.gl.LINE_STRIP, triangles: app.gl.TRIANGLES, triangle_strip: app.gl.TRIANGLE_STRIP }[primitive] ); const bundle = { useFbo: (iFbo) => { if (iFbo === 0 || iFbo > 0) app.drawFramebuffer(fboObjects[iFbo]); else app.defaultDrawFramebuffer(); return bundle; }, depthTest: (flag) => { if (flag) app.enable(picogl.DEPTH_TEST); else app.disable(picogl.DEPTH_TEST); return bundle; }, app, drawCall, program, fboObjects, textureObjects, canvas }; for (let func of ["texture", "uniform", "draw"]) bundle[func] = (...args) => { drawCall[func](...args); return bundle; }; for (let func of ["clear", "clearColor"]) bundle[func] = (...args) => { app[func](...args); return bundle; }; return bundle; }34:[{"id":"1cd05a0d7e6e50480d1cfaf17b36fdd52f968873329d4797b777b801d23c6dc61c54f8b8e34d0d4928743077210aae9b11ba4a472024362abcd01943f8b5f4db","href":"https://static.observableusercontent.com/files/1cd05a0d7e6e50480d1cfaf17b36fdd52f968873329d4797b777b801d23c6dc61c54f8b8e34d0d4928743077210aae9b11ba4a472024362abcd01943f8b5f4db","name":"webgl-logo.png","type":"image/png","lastModified":1696004984571.029,"size":31640},{"id":"829323ea9c7be00997e725a072760f096453b1e667cf71377ec154c1560530d1517e42f29d7a0984b53c904413b884b7bff628da1181d78d7d0b761832c67254","href":"https://static.observableusercontent.com/files/829323ea9c7be00997e725a072760f096453b1e667cf71377ec154c1560530d1517e42f29d7a0984b53c904413b884b7bff628da1181d78d7d0b761832c67254","name":"texturedCube@14.obj","type":"application/octet-stream","lastModified":1696110444106.814,"size":616}] 2e:{"title":"WebGL 2 helper","cells":[{"id":270,"value":"# WebGL 2 helper\n\n`gl2Helper` is a simplification of [PicoGL's](https://tsherif.github.io/picogl.js) abstraction so we can write webGL 2 applications without much fuss.\n","pinned":false,"hidden":false,"mode":"md"},{"id":795,"value":"
\n## Default example\n\nIf you don't write shaders, this is what you get. ","pinned":false,"hidden":false,"mode":"md"},{"id":797,"value":"defaultExample = {\n const helper = gl2helper().draw();\n return helper.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":820,"value":"
\n## Drawing a triangle\n\nFrom the PicoGL tutorial. Also shown in https://observablehq.com/@esperanc/picogl-tutorial-part-i\n","pinned":false,"hidden":false,"mode":"md"},{"id":828,"value":"{\n const helper = gl2helper({\n vertexShader: `#version 300 es\n layout(location=0) in vec4 position;\n layout(location=1) in vec3 color;\n \n out vec3 vColor;\n void main() {\n vColor = color;\n gl_Position = position;\n }`,\n fragmentShader: `#version 300 es\n precision highp float;\n \n in vec3 vColor;\n out vec4 fragColor;\n \n void main() {\n fragColor = vec4(vColor, 1.0);\n }`,\n attributes: {\n positions: [\n [-0.5, -0.5],\n [0.5, -0.5],\n [0.0, 0.5]\n ],\n colors: [\n [1.0, 0.0, 0.0],\n [0.0, 1.0, 0.0],\n [0.0, 0.0, 1.0]\n ]\n }\n });\n helper.clearColor(0, 0, 0, 1).clear().draw();\n return helper.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":695,"value":"
\n## Example using MRT and FBO\n\n(MRT = Multiple Render Targets; FBO = Frame Buffer Object)
\n\nFrom the picoGL tutorial. See also https://observablehq.com/@esperanc/picogl-tutorial-part-ii-b\n","pinned":false,"hidden":false,"mode":"md"},{"id":700,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":849,"value":"
\n## Rotating shaded textured cube","pinned":false,"hidden":false,"mode":"md"},{"id":873,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":851,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":807,"value":"
\n## Implementation","pinned":false,"hidden":false,"mode":"md"},{"id":212,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":958,"value":"
\n## A simple parser for obj files","pinned":false,"hidden":false,"mode":"md"},{"id":835,"value":"function objParse(obj) {\n // Simplified obj file parser\n let faces = [];\n let vertices = [];\n let vnormals = [];\n let vtexcoords = [];\n for (let line of obj.split(/\\n/)) {\n const words = line.trim().split(/\\s+/);\n const type = words[0].toUpperCase();\n const data = words.slice(1);\n switch (type) {\n case \"V\":\n vertices.push(data.map((w) => +w));\n break;\n case \"VT\":\n vtexcoords.push(data.map((w) => +w));\n break;\n case \"VN\":\n vnormals.push(data.map((w) => +w));\n break;\n case \"F\":\n faces.push(data.map((w) => w.split(\"/\").map((index) => +index)));\n }\n }\n return { faces, vertices, vnormals, vtexcoords };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":843,"value":"//\n// From an obj file, returns a set of attributes named\n// position, texcoord and normal with the corresponding values.\n// texcoord and normal are optional and are omitted if not defined\n// in the obj file. Assumes the obj file defines triangular faces\n//\nfunction objToAttributes(obj) {\n const { faces, vertices, vnormals, vtexcoords } = objParse(obj);\n const position = [];\n const normal = [];\n const texcoord = [];\n for (let face of faces) {\n for (let [i, j, k] of face) {\n position.push(vertices[i - 1]);\n if (j) texcoord.push(vtexcoords[j - 1]);\n if (k) normal.push(vnormals[k - 1]);\n }\n }\n const attr = { position };\n if (texcoord.length) attr.texcoord = texcoord;\n if (normal.length) attr.normal = normal;\n return attr;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":804,"value":"
\n## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":210,"value":"picogl = require(\"picogl@0.17.3/build/picogl.min.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":823,"value":"glmatrix = import(\"https://unpkg.com/gl-matrix@3.4.3/esm/index.js?module\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}