2b:null 2c:["$","title",null,{"children":"Barycentric coordinate in WebGL | Chuncheng | Observable"}] 31:[] 2f:{"id":"d6b5ba65ac9dffc6","slug":"barycentric-coordinate-in-webgl","title":"Barycentric coordinate in WebGL","thumbnail":"2ade1c5a1b8f11ed7a5258012672a52596b1d6d433730d31a04a0c3d52b90a83","access_level":"public","create_time":"$D2023-09-12T06:44:52.995Z","update_time":"$D2023-09-15T07:12:05.118Z","view_time":null,"first_public_time":"$D2023-09-12T06:44:52.995Z","fork":{"id":"fda9111ace20bfe5","slug":"webgls-template","title":"WebGL's Simple Animation & Stats & Code-Prettify","owner":{"id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng"}},"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":950,"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":"Barycentric coordinate in WebGL","cells":[{"id":0,"value":"# Barycentric coordinate in WebGL","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":729,"value":"\n\n

Drawing setup

\n ${viewof animation}\n ${viewof backgroundColor}\n ${viewof movingSpeed}\n ${viewof numTriangles}\n

Uniforms in fragment rendering

\n ${viewof uniforms}\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"

${statsMonitor.dom}

Canvas for WebGL

Vert for REGL

Frag for REGL

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":681,"value":"

Refresh ratio is ${refreshRatio}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"shaderSource = {\n const vert = `\n${glsl.precision}\n\nattribute vec2 position;\nattribute vec3 baryCentricCoord;\n\nvarying vec3 v_baryCentricCoord;\n\nvoid main () {\n v_baryCentricCoord = baryCentricCoord;\n gl_Position = vec4(position, 0.0, 1.0);\n}\n`,\n frag = `\n${glsl.useStandardDerivatives}\n${glsl.precision}\n${glsl.dist}\n${glsl.wireframe}\n\nvarying vec3 v_baryCentricCoord;\n\nuniform float alpha, grids, gridWidth, gridFeather;\n\nvec2 pow(vec2 src, float p) {\n return vec2(pow(src.x, p), pow(src.y, p));\n}\n\nvoid main () {\n float wf = 0.8 - wireframe(v_baryCentricCoord * grids, gridWidth, gridFeather);\n \n gl_FragColor = mix(vec4(v_baryCentricCoord, alpha), vec4(1.0), wf);\n}\n`;\n\n return { vert, frag };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"/**\n * Draw the triangle using regl\n */\n{\n now;\n\n const { regl, blend } = reglDrawer;\n\n function redraw() {\n regl.clear({ color: backgroundColorForWebGL });\n\n // Example of position parameter\n // const position = [\n // [-0.5, -0.5],\n // [0.5, -0.5],\n // [0, 0.5]\n // ];\n\n const position = triangles\n .slice(0, numTriangles)\n .map((triangle) => triangle.map((d) => [d.x, d.y])),\n baryCentricCoord = triangles.map((triangle) => [\n triangle.map((d) => d.baryCentricCoord)\n ]);\n\n const drawTriangle = regl({\n vert: shaderSource.vert,\n frag: shaderSource.frag,\n attributes: { position, baryCentricCoord },\n uniforms,\n count: triangles.length * 3,\n blend,\n depth: { enable: false }\n });\n\n drawTriangle();\n\n statsMonitor.update();\n }\n\n if (animation) {\n triangles.map((triangle) => {\n triangle.update(movingSpeed / refreshRatio);\n });\n }\n\n redraw();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":522,"value":"triangles = [...new Array(20)].map(genTriangle)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"genTriangle = () => {\n const noiseGen = new simplexNoise(d3.randomUniform()()),\n baryCentricCoord = [\n [1, 0, 0],\n [0, 1, 0],\n [0, 0, 1]\n ],\n t = 0;\n\n const triangle = baryCentricCoord.map((bcc, i) =>\n Object.assign(\n {},\n {\n baryCentricCoord: bcc,\n x: noiseGen.noise2D(i + t, 1),\n y: noiseGen.noise2D(i + t, 10),\n v: noiseGen.noise2D(i + t, 100)\n }\n )\n );\n\n function update(tStep = 0.0001) {\n var { t, noiseGen } = triangle;\n triangle.map((vertex, i) => {\n t += tStep;\n Object.assign(vertex, {\n x: noiseGen.noise2D(i + t, 1),\n y: noiseGen.noise2D(i + t, 10),\n v: noiseGen.noise2D(i + t, 100)\n });\n });\n Object.assign(triangle, { t: t + tStep });\n }\n\n Object.assign(triangle, { t, noiseGen, update });\n\n return triangle;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"reglDrawer = {\n const canvas = DOM.canvas(width, height),\n pixelRatio = 2.0,\n extensions = [\"oes_standard_derivatives\"],\n regl = wrapREGL({\n canvas,\n pixelRatio,\n extensions\n }),\n blend = {\n enable: true,\n func: {\n srcRGB: \"src alpha\",\n srcAlpha: 1,\n dstRGB: \"one minus src alpha\",\n dstAlpha: 1\n },\n equation: {\n rgb: \"add\",\n alpha: \"add\"\n }\n };\n\n Object.assign(canvas, { width, height });\n\n {\n const div = document.getElementById(\"canvasDivForWebGL\");\n div.innerHTML = \"\";\n div.appendChild(canvas);\n }\n\n updateDivForREGL(shaderSource);\n\n return { canvas, regl, blend };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"updateDivForREGL = (shaderSource) => {\n const { vert, frag } = shaderSource;\n\n {\n const div = document.getElementById(\"vertDivForREGL\");\n div.innerHTML = \"\";\n\n d3.select(div)\n .append(\"pre\")\n .attr(\"class\", \"prettyprint linenums lang-c\")\n .append(\"code\")\n .text(vert.trim());\n }\n\n {\n const div = document.getElementById(\"fragDivForREGL\");\n div.innerHTML = \"\";\n\n d3.select(div)\n .append(\"pre\")\n .attr(\"class\", \"prettyprint linenums lang-c\")\n .append(\"code\")\n .text(frag.trim());\n }\n\n PR.prettyPrint();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"width = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"backgroundColorForWebGL = [d3.color(backgroundColor)].map(\n ({ r, g, b, opacity }) => [r / 255, g / 255, b / 255, opacity]\n)[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"glsl = ({\n useStandardDerivatives: `\n#extension GL_OES_standard_derivatives : enable\n`,\n constants: `\n#define PI 3.141592653589793238\n#define HALF_PI 1.57079632679\n#define HALF_PI_INV 0.15915494309\n#define LOG_2 0.69314718056\n#define C_ONE (vec2(1.0, 0.0))\n#define C_I (vec2(0.0, 1.0))\n#define TO_RADIANS 0.01745329251\n`,\n precision: `\nprecision highp float;\n`,\n dist: `\nfloat dist(vec2 d) {\n return sqrt(pow(d.x, 2.0) + pow(d.y, 2.0));\n}\n\nfloat dist(vec2 a, vec2 b) {\n vec2 d = a - b;\n return dist(d);\n}\n`,\n hsv2rgb: `\nvec3 hsv2rgb(vec3 c) {\n vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);\n vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);\n return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);\n}\n`,\n wireframe: `\nfloat wireframe (vec3 parameter, float width, float feather) {\n float w1 = width - feather * 0.5;\n vec3 d = fwidth(parameter);\n vec3 looped = 0.5 - abs(mod(parameter, 1.0) - 0.5);\n vec3 a3 = smoothstep(d * w1, d * (w1 + feather), looped);\n return min(min(a3.x, a3.y), a3.z);\n}\n`\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"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"},{"id":220,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":226,"value":"statsMonitor = {\n const stats = new Stats(),\n { dom } = stats;\n dom.style.position = \"relative\";\n\n return stats;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"Stats = require(\"https://cdn.jsdelivr.net/npm/stats-js@1.0.1/build/stats.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"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":11,"value":"wrapREGL = require(\"regl\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"simplexNoise = require(\"simplex-noise@2.4.0\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":940,"value":"refreshRatio = 1000 / (await getRepaintInterval())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":944,"value":"/**\n * Get repaint interval, the value is used to compute the refreshRatio\n * The result is of milliseconds\n * Inspired by https://stackoverflow.com/questions/6131051/is-it-possible-to-find-out-what-is-the-monitor-frame-rate-in-javascript\n */\ngetRepaintInterval = () => {\n return new Promise((resolve) => {\n requestAnimationFrame((t1) => {\n requestAnimationFrame((t2) => {\n resolve(t2 - t1);\n });\n });\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"---\n\n## Setup components","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"viewof backgroundColor = Inputs.color({\n label: \"Background Color\",\n value: \"#455663\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":697,"value":"viewof numTriangles = Inputs.select(\n triangles.map((d, i) => i),\n { label: \"Num triangles\", value: 3 }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":690,"value":"viewof movingSpeed = Inputs.range([0.01, 0.05], {\n label: \"Moving speed\",\n value: 0.02,\n step: 0.001\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"viewof animation = Inputs.toggle({ label: \"Animation\", value: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":639,"value":"viewof uniforms = Inputs.form({\n alpha: Inputs.range([0, 1], { label: \"Alpha\", step: 0.01, value: 0.5 }),\n grids: Inputs.range([2, 10], { label: \"Grids\", step: 1, value: 3 }),\n gridWidth: Inputs.range([0.2, 2], {\n label: \"Grid width\",\n step: 0.1,\n value: 0.5\n }),\n gridFeather: Inputs.range([0.5, 50.0], {\n label: \"Grid feather\",\n step: 0.1,\n value: 1\n })\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"