2b:null 2c:["$","title",null,{"children":"How does regl help? | Chuncheng | Observable"}] 31:T552,/** * Render with the REGL and WebGL, * and the vert and frag codes. */ { function wrapCanvasBlock(canvasPairs) { const insides = canvasPairs.map( ({ title, canvas }) => htl.html`

${title}

${canvas}

` ); return htl.html`

${insides}

`; } function wrapCodesBlock(codePairs) { const insides = codePairs.map( ({ title, code }) => htl.html`

${title}

    
      ${"\n" + code.trim()}

` ); return htl.html`

${insides}

`; } const canvasPairs = [ { title: "Canvas with REGL", canvas: reglDrawer.canvas }, { title: "Canvas with WebGL", canvas: webglDrawer.canvas } ]; const codePairs = [ { title: "Code of vert", code: shaderSource.vert }, { title: "Code of frag", code: shaderSource.frag } ]; document.getElementById("embedding").innerHTML = ""; document .getElementById("embedding") .appendChild(wrapCanvasBlock(canvasPairs)); document.getElementById("embedding").appendChild(wrapCodesBlock(codePairs)); PR.prettyPrint(); }32:Tcb3,{ const { gl } = webglDrawer; /** ========================= SHADERS ========================= * Create the SHADER_PROGRAM and compile it with the vertex and fragment */ function createShaderProgram() { const SHADER_PROGRAM = gl.createProgram(), { vert, frag } = shaderSource; // Compile const shader_vertex = bindShader(vert, gl.VERTEX_SHADER, gl), shader_fragment = bindShader(frag, gl.FRAGMENT_SHADER, gl); // Attach gl.attachShader(SHADER_PROGRAM, shader_vertex); gl.attachShader(SHADER_PROGRAM, shader_fragment); // Link gl.linkProgram(SHADER_PROGRAM); // Enable color and position attributes // Enable _radian uniform const _color = gl.getAttribLocation(SHADER_PROGRAM, "color"), _position = gl.getAttribLocation(SHADER_PROGRAM, "position"), _radian = gl.getUniformLocation(SHADER_PROGRAM, "radian"); gl.enableVertexAttribArray(_color); gl.enableVertexAttribArray(_position); gl.enableVertexAttribArray(_radian); gl.useProgram(SHADER_PROGRAM); return { SHADER_PROGRAM, _position, _color, _radian }; } /** ========================= Create buffers for vertex and fragment ========================= * Create buffers for vertex and fragment */ function createTriangleFace(triangle_vertex, triangle_fragment) { // Vertex: const TRIANGLE_VERTEX = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, TRIANGLE_VERTEX); gl.bufferData( gl.ARRAY_BUFFER, new Float32Array(triangle_vertex), gl.STATIC_DRAW ); // Fragment: const TRIANGLE_FRAGMENT = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, TRIANGLE_FRAGMENT); gl.bufferData( gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(triangle_fragment), gl.STATIC_DRAW ); return { TRIANGLE_VERTEX, TRIANGLE_FRAGMENT }; } /** ========================= Create buffers for vertex and fragment ========================= * Bind parameters for vertex and fragment */ function bindParameters(triangle_vertex, triangle_fragment) { // Create SHADER_PROGRAM const { SHADER_PROGRAM, _position, _color, _radian } = createShaderProgram(); const { TRIANGLE_VERTEX, TRIANGLE_FRAGMENT } = createTriangleFace( triangle_vertex, triangle_fragment ); // The 4 refers 4 bytes per number gl.vertexAttribPointer(_position, 2, gl.FLOAT, false, 4 * (2 + 3), 0); gl.vertexAttribPointer(_color, 3, gl.FLOAT, false, 4 * (2 + 3), 4 * 2); return { _radian, TRIANGLE_VERTEX, TRIANGLE_FRAGMENT }; } // Binds with triangle const triangle_vertex = [], triangle_fragment = [0, 1, 2]; triangle_fragment.map((i) => { attributes.position[i].map((d) => triangle_vertex.push(d)); attributes.color[i].map((d) => triangle_vertex.push(d)); }); const { _radian, TRIANGLE_VERTEX, TRIANGLE_FRAGMENT } = bindParameters( triangle_vertex, triangle_fragment ); { // Clear the scene gl.clearColor(0, 0.1, 0.26, 1); gl.clear(gl.COLOR_BUFFER_BIT); // The radian is a float gl.uniform1f(_radian, radian); // Real draw gl.drawElements(gl.TRIANGLES, 3, gl.UNSIGNED_SHORT, 0); gl.flush(); } return triangle_vertex; }33:T428,shaderSource = { const vert = ` precision mediump float; attribute vec2 position; attribute vec3 color; uniform float radian; varying vec3 v_color; varying vec2 v_pos; vec2 rotate(vec2 src, float radian) { vec2 dst = vec2( src.x * cos(radian) - src.y * sin(radian), src.x * sin(radian) + src.y * cos(radian) ); return dst; } void main () { v_color = color; v_pos = rotate(position, radian); ${clipToggle ? "v_pos.x = min(0.1, v_pos.x)" : "// Placeholder of clip"}; gl_Position = vec4(v_pos, 0.0, 1.0); } `, frag = ` precision mediump float; varying vec3 v_color; varying vec2 v_pos; float dist(vec2 d) { return sqrt(pow(d.x, 2.0) + pow(d.y, 2.0)); } float dist(vec2 a, vec2 b) { vec2 d = a - b; return dist(d); } void main () { gl_FragColor = vec4(v_color, 1.0); float d = dist(v_pos); // Draw a ring around the (0, 0) if (d > 0.02 - 0.01 && d < 0.02) gl_FragColor = vec4(1.0); // Draw a ring around the (0, 0) if (d > 0.3 - 0.005 && d < 0.3) gl_FragColor = vec4(1.0); } `; return { vert, frag }; }34:[] 2f:{"id":"468aa52b8f2f5045","slug":"how-does-regl-help","title":"How does regl help?","thumbnail":"6b85c50994a7d1456f6767e12cccd2e0da504360147b48c39202a8c76262a007","access_level":"public","create_time":"$D2023-09-05T08:14:01.085Z","update_time":"$D2023-09-10T09:08:10.466Z","view_time":null,"first_public_time":"$D2023-09-05T08:14:01.085Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":"starter_2024"},"version":846,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"16328058352682a8","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":null}],"members":[{"type":"individual","id":"16328058352682a8","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"1a3bf472363b1040","slug":"webgl-baby-step","title":"WebGL baby steps","owner":{"id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng"}},"type":"notebook","body":{"title":"How does regl help?","cells":[{"id":0,"value":"# How does regl help?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":75,"value":"viewof form = Inputs.form({\n color0: Inputs.color({ label: \"Color 0\", value: \"#389df0\" }),\n color1: Inputs.color({ label: \"Color 1\", value: \"#34da3f\" }),\n color2: Inputs.color({ label: \"Color 2\", value: \"#ec1842\" })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"viewof radian = Inputs.range([-6, 6], {\n label: \"Radian\",\n step: 0.01,\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":720,"value":"viewof clipToggle = Inputs.toggle({ label: \"Clip toggle\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"

\n \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":110,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"---\n\n## Draw REGL","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"reglDrawer = {\n const canvas = DOM.canvas(width, height),\n pixelRatio = 1.0,\n extensions = [\"oes_standard_derivatives\"],\n regl = wrapREGL({\n canvas,\n pixelRatio,\n extensions\n });\n\n Object.assign(canvas, { width, height });\n\n return { canvas, regl };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"/**\n * Draw the triangle using regl\n */\n{\n const { regl } = reglDrawer,\n drawTriangle = regl({\n vert: shaderSource.vert,\n frag: shaderSource.frag,\n attributes,\n uniforms: {\n radian: regl.prop(\"radian\")\n },\n count: 3\n });\n\n regl.clear({ color: [0, 0.1, 0.26, 1] });\n\n drawTriangle({ radian: radian });\n\n return drawTriangle;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"---\n\n## Draw WebGL","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":116,"value":"webglDrawer = {\n const canvas = DOM.canvas(width, height),\n gl = canvas.getContext(\"webgl\", { antialias: true });\n\n Object.assign(canvas, { width, height });\n\n return { canvas, gl };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"/**\n * Create the shader,\n * and bind the source with the shader,\n * type is one of the following:\n * type = gl.VERTEX_SHADER\n * type = gl.FRAGMENT_SHADER\n * gl is the WebGLRenderingContext\n */\nbindShader = (source, type, gl) => {\n const shader = gl.createShader(type);\n gl.shaderSource(shader, source);\n gl.compileShader(shader);\n return shader;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"---\n\n## Drawing components","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":88,"value":"attributes = {\n function color2rgb(color) {\n const c = d3.color(color);\n return [c.r, c.g, c.b].map((d) => d / 255);\n }\n\n return {\n position: [\n [-0.5, -0.5],\n [0.5, -0.5],\n [0, 0.5]\n ],\n color: [\n color2rgb(form.color0),\n color2rgb(form.color1),\n color2rgb(form.color2)\n ]\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"width = 400","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"height = 400","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"wrapREGL = require(\"regl\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"PR = require(\"https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":710,"value":"---\n\n## Vert\n\n```glsl\n${shaderSource.vert}\n```\n\n## Frag\n\n```glsl\n${shaderSource.frag}\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"