25:null 26:["$","title",null,{"children":"Introduction to WebGL | Peter Szerzo | Observable"}] 2b:T762,drawing = () => { // Create a container const div = document.createElement("div") div.style.width = "300px"; div.style.height = "300px"; div.style.background = "#F5F5F8"; const regl = createRegl({ container: div }) // Creates an array like [ [ 0.2, 0.3 ], [ -0.3, 0.4 ] ... ] const createData = () => Array.apply(null, Array(15)).map(() => [ 2 * Math.random() - 1, 2 * Math.random() - 1 ]) const data = createData() const sqrt3 = Math.sqrt(3) const triangleSize = 0.10 const triangle = [ [triangleSize * 0.5, triangleSize * sqrt3 / 2 / 3], [-triangleSize * 0.5, triangleSize * sqrt3 / 2 / 3], [triangleSize * 0, -triangleSize * sqrt3 / 2 * 2 / 3] ] const drawTriangle = regl({ // Fragment shader frag: ` precision mediump float; uniform vec4 color; uniform float time; void main() { gl_FragColor = color; } `, // Vertex shader vert: ` precision mediump float; uniform float time; attribute vec2 position; void main() { gl_Position = vec4( position, 0.0, 1.0 ); } `, attributes: { position: regl.buffer( data.map(coords => [ coords[0] + triangle[0][0], coords[1] + triangle[0][1], coords[0] + triangle[1][0], coords[1] + triangle[1][1], coords[0] + triangle[2][0], coords[1] + triangle[2][1], ]) ) }, // Uniform variables // (both vertex and fragment shaders have access to these) uniforms: { color: regl.prop('color'), time: regl.prop('time') }, count: data.length * 3 }) regl.frame(({ time }) => { regl.clear({ color: [0, 0, 0, 0], depth: 1 }) const color = [ 0, 0, 0, 1 ] drawTriangle({ time, color }) }) return div }2c:T587,pseudoCode = { // Constants available everywhere - defined by the end user const uniforms = { time: 0, mouse: [ 100, 200 ] }; // The mesh - defined by the end user const attributes = [ [ 0.1, 0.2, 1.0, 500 ], [ 0.1, 0.2, 1.0, 500 ], [ 0.1, 0.2, 1.0, 500 ], // triangle 1 [ 6.1, 3.2, 6.0, 200 ], [ 2.1, 9.4, 4.2, 200 ], [ 7.1, 0.4, 7.9, 200 ], // triangle 2 ]; // The vertex shader operating on a single coordinate (attribute) const vertexShader = (uniforms, attribute) => { return { position: fancyCameraProjection(attribute), varyings: { importance: attribute[3] > 300 ? 1 /* red */ : 0 /* black */ } }; }; // The fragment shader operating on a single pixel, interpolated // between `position` values returned by the vertex shader. // Also has access to miscellaneous values calculated by the vertex shader. const fragmentShader = (uniforms, varyings) => { return varyings.importance === 0 ? [ 0, 0, 1, 1 ] /* red */ : [ 0, 0, 0, 1 ] /* black */ }; // Dummy functions const fancyCameraProjection = () => {} // Flowchart // (i -> input, f -> function, o -> output) /** * i:uniforms --->---|--->---------->----------->---| * |--->--- f:vertexShader --->---|--->--- f:fragmentShader --->--- o:color * i:attributes --->---| */ return "Expand to see pseudocode!" }2d:Ta15,drawing2 = () => { // Create a container const div = document.createElement("div") div.style.width = "600px"; div.style.height = "600px"; div.style.border = "1px solid #F5F5F8"; const regl = createRegl({ container: div }) const createData = () => Array.apply(null, Array(40)).map(() => [ 2 * Math.random() - 1, 2 * Math.random() - 1, Math.random() ]) const data = createData() const sqrt3 = Math.sqrt(3) const triangleSize = 0.04 const triangle = [ [triangleSize * 0.5, triangleSize * sqrt3 / 2 / 3], [-triangleSize * 0.5, triangleSize * sqrt3 / 2 / 3], [triangleSize * 0, -triangleSize * sqrt3 / 2 * 2 / 3] ] const drawTriangle = regl({ // Fragment shader frag: ` precision mediump float; uniform vec4 minColor; uniform vec4 maxColor; uniform float time; varying float depth; void main() { gl_FragColor = minColor * depth + maxColor * (1.0 - depth); } `, // Vertex shader vert: ` precision mediump float; uniform float time; attribute vec3 position; varying float depth; void main() { float sinTime = sin(0.4 * time); float cosTime = cos(0.4 * time); mat3 simpleRotate = mat3( cosTime, sinTime, 0.0, -sinTime, cosTime, 0.0, 0.0, 0.0, 1.0 ); mat3 simpleRotate2 = mat3( cosTime, 0.5 * cosTime, sinTime, -sinTime, 1.0, cosTime, 0.0, 0.0, 1.0 ); mat3 scale = mat3(0.9 - 0.1 * sinTime); depth = position.z; gl_Position = vec4( position, 1.0 ); } `, attributes: { position: regl.buffer( data.map(coords => [ coords[0] + triangle[0][0], coords[1] + triangle[0][1], coords[2], coords[0] + triangle[1][0], coords[1] + triangle[1][1], coords[2], coords[0] + triangle[2][0], coords[1] + triangle[2][1], coords[2] ]) ) }, // Uniform variables // (both vertex and fragment shaders have access to these) uniforms: { minColor: regl.prop('minColor'), maxColor: regl.prop('maxColor'), time: regl.prop('time') }, count: data.length * 3 }) regl.frame(({ time }) => { regl.clear({ color: [0, 0, 0, 0], depth: 1 }) const color = [ 0, 0, 0, 1 ] drawTriangle({ time, minColor: [ 88 / 256, 181 / 256, 127 / 256, 1 ], maxColor: [ 64 / 256, 78 / 256, 124 / 256, 1 ] }) }) return div }2e:[] 29:{"id":"b7e552bf208c59be","slug":"untitled/2","title":"Introduction to WebGL","thumbnail":"66246650803ae198a8392067d5870a1acc20fc582ba5b54bf47a2d173cde313b","access_level":"public","create_time":"$D2018-10-08T16:26:39.596Z","update_time":"$D2020-11-06T09:43:49.986Z","view_time":null,"first_public_time":"$D2018-10-10T16:34:58.970Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"b27d56e28dc47ff9","login":"peterszerzo","name":"Peter Szerzo","avatar_url":"https://avatars-next.observableusercontent.com/de37e82fe0fea902617a6a0feec8dd5dba45446b7bf7a99594b8990a8e6a48ba","tier":"starter_2024"},"version":573,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fac927a1fe35263e","login":"peterszerzo","name":"Peter Szerzo","avatar_url":"https://avatars-next.observableusercontent.com/de37e82fe0fea902617a6a0feec8dd5dba45446b7bf7a99594b8990a8e6a48ba","tier":null}],"members":[{"type":"individual","id":"fac927a1fe35263e","login":"peterszerzo","name":"Peter Szerzo","avatar_url":"https://avatars-next.observableusercontent.com/de37e82fe0fea902617a6a0feec8dd5dba45446b7bf7a99594b8990a8e6a48ba","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Introduction to WebGL","cells":[{"id":559,"value":"md`# Introduction to WebGL`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"divider()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"md`# Introduction to WebGL`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`### Taking it easy with low-level graphics`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"divider()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"md`## This is Peter\n\n*Aspiring Corporate IconMacher*\n\nI write frontend, draw icons and sometimes order 🌯\n\nI also make [visual tools](http://splytlight.surge.sh) and [animations](http://overeasy.sh/walk-with-me)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"divider()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"md`## SVG - graphics for the sane`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"divider()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"divider()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"md`## Advantages of SVG:\n* speaks our language\n* terse\n* flexible\n* composable\n* HTML goodies\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"divider()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"md`## Disadvantages of SVG:\n* it's DOM nodes 😨 (diffing, React, d3, jsx, webpack, ..)\n* rendering is expensive\n* updating attributes is expensive\n* math is expensive because of JS (sines, cosines, easing functions)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"md`[Slow SVG](http://overeasy.sh/bureaucracy-is-distracting)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"divider()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"md`## What is WebGL?\n* born out of OpenGL\n* gives low-level graphics capabilities through a JavaScript API (JS-to-GPU)\n* very good browser support\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"divider()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"md`## Getting started with WebGL\n* without a lib - draw a triangle in 120 lines\n* THREE.js - high-level, practical, productive / [example](http://splytlight.surge.sh)\n* regl - low-level, functional, expressive\n* elm-explorations/webgl - low-level without the pain\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"divider()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"drawing()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"divider()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"md`## The graphics pipeline`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"md`\n* **mesh:** a bunch of 3d triangles defining the geometry\n* **vertex shaders:** mesh-level calculations such as camera projections, depth, lighting analysis\n* **fragment shaders:** pixel-level calculations, mostly color manipulation\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"divider()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"md`## Graphics pipeline in pseudocode`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"divider()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"md`## What makes rendering so efficient?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"divider()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"md`## *One* - It is so para||e| 🤓`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"md`* vertex shaders can be parallelized per vertex\n* fragment shaders are parallelized per fragment (pixel)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"divider()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"md`## *Two* - Super fast math`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"divider()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"tex.block`sin^2 a + cos^2 a = \\frac{\\pi^2}{4}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"divider()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"md`### I clearly need some computer help with this 😢..\n\nLuckily, this is super fast on the GPU:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"md`\n sin(30.0) * sin(30.0) + cos(30.0) * cos(30.0) - 1\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"divider()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"tex.block`\\begin{bmatrix}\n m_{11} & m_{12} & m_{13} \\\\\n m_{21} & m_{22} & m_{23} \\\\\n m_{31} & m_{32} & m_{33}\n\\end{bmatrix}\n\\times\n\\begin{bmatrix}\n x \\\\ y \\\\ z\n\\end{bmatrix}\n=\n\\begin{bmatrix}\n m_{11} \\times x + m_{12} \\times y + m_{13} \\times z \\\\\n m_{21} \\times x + m_{22} \\times y + m_{23} \\times z \\\\\n m_{31} \\times x + m_{32} \\times y + m_{33} \\times z\n\\end{bmatrix}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"divider()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"md`Do nothing:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"tex.block`\\begin{bmatrix}\n 1 & 0 & 0 \\\\\n 0 & 1 & 0 \\\\\n 0 & 0 & 1\n\\end{bmatrix}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"divider()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"md`Scale:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"tex.block`\\begin{bmatrix}\n 2 & 0 & 0 \\\\\n 0 & 2 & 0 \\\\\n 0 & 0 & 2\n\\end{bmatrix}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"divider()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"md`Rotate:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"tex.block`\\begin{bmatrix}\n cos(a) & sin(a) & 0 \\\\\n -sin(a) & cos(a) & 0 \\\\\n 0 & 0 & 1\n\\end{bmatrix}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"divider()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"md`But also:\n* 3d rotation\n* skewing\n* simple camera projection\n* perspective\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"divider()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"md`Scale by 2 and rotate by 30 degrees:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":528,"value":"tex.block`\\begin{bmatrix}\n 2 & 0 & 0 \\\\\n 0 & 2 & 0 \\\\\n 0 & 0 & 2\n\\end{bmatrix}\n\\times\n\\begin{bmatrix}\n cos(30) & sin(30) & 0 \\\\\n -sin(30) & cos(30) & 0 \\\\\n 0 & 0 & 1\n\\end{bmatrix}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"divider()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"md`The GPU is super fast at doing these operations:\n\n (scaleMatrix * rotateMatrix * perspectiveMatrix) * coordinate\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"divider()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"md`[More goodies](https://www.shaderific.com/glsl-functions/)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"divider()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"md`## Playtime!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"divider()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"drawing2()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"divider()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"md`## Curious?\n* [The Book of Shaders](https://thebookofshaders.com)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"divider()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"md`## Thanks a 💐`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"divider()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"createRegl = require('regl')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"divider = () => html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2a:"$29:body"