)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}

WebGL Shader Example

  1. (() => {
  2.  
  3.   const vert = `
  4.     attribute vec3 vec;
  5.     void main(void) {
  6.       gl_Position = vec4(vec, 1.);
  7.     }
  8.   `
  9.  
  10.   const frag = `
  11.     #ifdef GL_ES
  12.     precision highp float;
  13.     #endif
  14.     uniform float time;
  15.     void main(void) {
  16.       vec2 uv = gl_FragCoord.xy  / vec2(500., 500.);
  17.       float w = 1. + cos(uv.y * 60.) * cos(uv.x * 50. + time * 30.);
  18.       gl_FragColor = vec4(uv.x, w * .5, w, 1.);
  19.     }
  20.   `
  21.  
  22.   document.body.style.background = '#000'
  23.   const gl = document.body
  24.     .appendChild(document.createElement('canvas'))
  25.     .getContext('webgl')
  26.  
  27.   Object.assign(gl.canvas.style, {
  28.     position: 'absolute',
  29.     left: 0,
  30.     top: 0
  31.   })
  32.  
  33.   with (gl) {
  34.     const s = 1;
  35.     const verts = [
  36.       -s, -s, 0,
  37.        s, -s, 0,
  38.       -s,  s, 0,
  39.        s,  s, 0,
  40.     ]
  41.  
  42.     const leng = verts.length / 3
  43.     bindBuffer(ARRAY_BUFFER, createBuffer())
  44.     bufferData(ARRAY_BUFFER, new Float32Array(verts), STATIC_DRAW)
  45.  
  46.     const vs = createShader(VERTEX_SHADER)
  47.     shaderSource(vs, vert)
  48.     compileShader(vs)
  49.  
  50.     const fs = createShader(FRAGMENT_SHADER)
  51.     const sp = createProgram()
  52.  
  53.     shaderSource(fs, frag)
  54.     compileShader(fs)
  55.     attachShader(sp, vs)
  56.     attachShader(sp, fs)
  57.     linkProgram(sp)
  58.     useProgram(sp)
  59.  
  60.     const vec = getAttribLocation(sp, 'vec')
  61.     vertexAttribPointer(vec, 3, FLOAT, false, 0, 0)
  62.     enableVertexAttribArray(vec)
  63.  
  64.     onresize = () => {
  65.       const { canvas } = gl 
  66.       canvas.width = innerWidth
  67.       canvas.height = innerHeight
  68.       viewport(0, 0, innerWidth, innerHeight)
  69.     }
  70.  
  71.     onresize()
  72.  
  73.     disable(DEPTH_TEST)
  74.     enable(BLEND)
  75.     blendFunc(SRC_ALPHA, ONE_MINUS_SRC_ALPHA)
  76.  
  77.     const startTime = Date.now();
  78.  
  79.     function loop() {
  80.       const time = (Date.now() - startTime) / 1000
  81.       const uniformTime = gl.getUniformLocation(sp, 'time');
  82.       gl.uniform1f(uniformTime, time);
  83.  
  84.       clearColor(0, 0, 0, 1)
  85.       clear(COLOR_BUFFER_BIT)
  86.       drawArrays(TRIANGLE_STRIP, 0, leng)
  87.       requestAnimationFrame(loop)
  88.     }
  89.     loop()
  90.   }
  91. })()

A basic shader setup. This is realistic minus the use of a with statement…

// 3d // glsl // javascript // shaders // webgl

Non-perspective WebGL Texture

  1. (() => {
  2.   const m = new Float32Array([
  3.     0, 0, 0, 0, 
  4.     0, 0, 0, 0, 
  5.     0, 0, 0, 0, 
  6.     0, 0, 0, 0
  7.   ])
  8.  
  9.   const pointSize = Math.max(Math.min(10, ~~(innerWidth / 70)), 3);
  10.  
  11.   const vert = `
  12.     attribute vec3 vec;
  13.     uniform mat4 mat;
  14.     void main(void) {
  15.       gl_Position = mat * vec4(vec, 1.);
  16.       gl_PointSize = ${pointSize}.;
  17.     }
  18.   `
  19.  
  20.   const frag = `
  21.     #ifdef GL_ES
  22.     precision highp float;
  23.     #endif
  24.     void main(void) {
  25.       vec2 uv = gl_FragCoord.xy  / vec2(500., 500.);
  26.       gl_FragColor = vec4(uv.x, 0., cos(uv.y * 60.), .4);
  27.     }
  28.   `
  29.  
  30.   document.body.style.background = '#333'
  31.   const gl = document.body
  32.     .appendChild(document.createElement('canvas'))
  33.     .getContext('webgl')
  34.  
  35.   Object.assign(gl.canvas.style, {
  36.     position: 'absolute',
  37.     left: '50%',
  38.     top: '50%',
  39.     transform: 'translate(-50%, -50%)',
  40.     outline: '1px solid gray'
  41.   })
  42.  
  43.   with (gl) {
  44.     const NUM = 3
  45.     const s = .5;
  46.     const verts = [
  47.       -s, -s, 0,
  48.        s, -s, 0,
  49.       -s,  s, 0,
  50.        s,  s, 0,
  51.     ]
  52.  
  53.     //  1.0,  1.0,
  54.     // -1.0,  1.0,
  55.     //  1.0, -1.0,
  56.     // -1.0, -1.0,
  57.  
  58.     // for (let i = 0; i < NUM; i++) {
  59.     //   verts.push(
  60.     //     Math.random() * 1 - 0.5,
  61.     //     Math.random() * 1 - 0.5,
  62.     //     Math.random() * 1 - 0.5
  63.     //   )
  64.     // }
  65.  
  66.     const leng = verts.length / 3
  67.     bindBuffer(ARRAY_BUFFER, createBuffer())
  68.     bufferData(ARRAY_BUFFER, new Float32Array(verts), STATIC_DRAW)
  69.  
  70.     const vs = createShader(VERTEX_SHADER)
  71.     shaderSource(vs, vert)
  72.     compileShader(vs)
  73.  
  74.     const fs = createShader(FRAGMENT_SHADER)
  75.     const sp = createProgram()
  76.  
  77.     shaderSource(fs, frag)
  78.     compileShader(fs)
  79.     attachShader(sp, vs)
  80.     attachShader(sp, fs)
  81.     linkProgram(sp)
  82.     useProgram(sp)
  83.  
  84.     const vec = getAttribLocation(sp, 'vec')
  85.     vertexAttribPointer(vec, 3, FLOAT, false, 0, 0)
  86.     enableVertexAttribArray(vec)
  87.  
  88.     const matLoc = getUniformLocation(sp, 'mat')
  89.  
  90.     function rot(x, y, z) {
  91.       // https://wikimedia.org/api/rest_v1/media/math/render/svg/a8e16f4967571b7a572d1a19f3f6468512f9843e
  92.  
  93.       const sinA = Math.sin(x)
  94.       const cosA = Math.cos(x)
  95.       const sinB = Math.sin(y)
  96.       const cosB = Math.cos(y)
  97.       const sinY = Math.sin(z)
  98.       const cosY = Math.cos(z)
  99.  
  100.       m[0] = cosA * cosB
  101.       m[1] = cosA * sinB * sinY - sinA * cosY
  102.       m[2] = cosA * sinB * cosY + sinA * sinY
  103.       m[3] = 0
  104.  
  105.       m[4] = sinA * cosB
  106.       m[5] = sinA * sinB * sinY + cosA * cosY
  107.       m[6] = sinA * sinB * cosY - cosA * sinY
  108.       m[7] = 0
  109.  
  110.       m[8] = -sinB
  111.       m[9] = cosB * sinY
  112.       m[10] = cosB * cosY
  113.       m[11] = m[12] = m[13] = 0
  114.       m[15] = 1
  115.  
  116.       uniformMatrix4fv(matLoc, false, m)
  117.     }
  118.  
  119.     onresize = () => {
  120.       const { canvas } = gl
  121.       const size = Math.min(innerWidth, innerHeight) - 20
  122.       canvas.width = canvas.height = size
  123.       viewport(0, 0, size, size)
  124.     }
  125.  
  126.     onresize()
  127.  
  128.     let rx = 0, ry = 0
  129.  
  130.     disable(DEPTH_TEST)
  131.     enable(BLEND)
  132.     blendFunc(SRC_ALPHA, ONE_MINUS_SRC_ALPHA)
  133.  
  134.     function loop() {
  135.       rot(rx += .01, ry += .01, 0)
  136.  
  137.       clearColor(0, 0, 0, 1)
  138.       clear(COLOR_BUFFER_BIT)
  139.       drawArrays(TRIANGLE_STRIP, 0, leng)
  140.       window.requestAnimationFrame(loop)
  141.     }
  142.     loop()
  143.   }
  144. })()

Forked from a previous example – toying with the idea of doing some kind of complex low level webgl… not sure, might end up using THREE… Please excuse some of the dead code here…

// canvas // webgl

Many WebGL Constants

  1. console.log(
  2.   Object.getOwnPropertyNames(WebGLRenderingContext)
  3. )
// tricks // webgl

Speed Coded Space

  1. (() => {
  2.   const TWO_PI = Math.PI * 2;
  3.   const m = new Float32Array([
  4.     0, 0, 0, 0,
  5.     0, 0, 0, 0,
  6.     0, 0, 0, 0,
  7.     0, 0, 0, 0
  8.   ])
  9.  
  10.   const vert = `
  11.     attribute vec3 vec;
  12.     uniform mat4 mat;
  13.     void main(void) {
  14.       gl_Position = mat * vec4(vec, 1.0);
  15.       gl_PointSize = 2.0;
  16.     }
  17.   `
  18.  
  19.   const frag = `
  20.     void main(void) {
  21.       gl_FragColor = vec4(1., 1., 1., .25);
  22.     }
  23.   `
  24.  
  25.   document.body.style.background = '#232323'
  26.   const gl = document.body
  27.     .appendChild(document.createElement('canvas'))
  28.     .getContext('webgl', {
  29.       preserveDrawingBuffer: true,
  30.       powerPreference: 'high-performance'
  31.     })
  32.  
  33.   Object.assign(gl.canvas.style, {
  34.     position: 'absolute',
  35.     left: '50%',
  36.     top: '50%',
  37.     transform: 'translate(-50%, -50%)',
  38.     outline: '1px solid gray'
  39.   })
  40.  
  41.  
  42.   with(gl) {
  43.     const NUM = 50
  44.     const radius = 0.7
  45.     let verts = []
  46.  
  47.     // Superformula (equations from):
  48.     // https://bsapubs.onlinelibrary.wiley.com/doi/10.3732/ajb.90.3.333
  49.     // http://en.wikipedia.org/wiki/Superformula
  50.     function superShape(a, b, m, n1, n2, n3, scale, x = 0, y = 0, z = 0, rx=0, ry=0, rz=0) {
  51.       const { random, pow, abs, cos, sin } = Math
  52.       // with(Math) { // destrucuring vs the dreaded `with`
  53.         let r = 0
  54.         let p = 0
  55.         let xp = 0
  56.         let yp = 0
  57.         let zp = 0
  58.  
  59.         let rotX = rx
  60.         let rotY = ry  
  61.         let rotZ = rz
  62.  
  63.         let cosX = cos(rotX)
  64.         let cosY = cos(rotY)
  65.         let sinX = sin(rotX)
  66.         let sinY = sin(rotY)
  67.  
  68.         while (p <= TWO_PI) {
  69.           let ang = (m * p) / 4
  70.  
  71.           r = pow(pow(abs(cos(ang) / a), n2) + pow(abs(sin(ang) / b), n3), -1 / n1)
  72.           xp = r * cos(p)
  73.           yp = r * sin(p)
  74.  
  75.           p += 0.05
  76.  
  77.           zp = zp * cosX - xp * sinX
  78.           xp = zp * sinX + xp * cosX
  79.           yp = yp * cosY - zp * sinY
  80.           zp = yp * sinY + zp * cosY
  81.  
  82.           verts[inc] = xp * scale + x
  83.           verts[inc + 1] = yp * scale + y
  84.           verts[inc + 2] = zp * scale + z
  85.           inc += 3;
  86.         }
  87.       // }
  88.     }
  89.  
  90.     let inc = 0; 
  91.     for (let i = 0; i < NUM; i++) {
  92.       let m =  Math.random() * 20
  93.       let n1 = Math.random() * 30
  94.       let n2 = Math.random() * 30
  95.       let n3 = Math.random() * 30
  96.       let scl = Math.random() * .2
  97.       let x = Math.random() * Math.cos(i)
  98.       let y = Math.random() * Math.sin(i);
  99.       let z = Math.random() - .5
  100.       let rx = Math.random() * TWO_PI,
  101.           ry = Math.random() * TWO_PI,
  102.           rz = Math.random() * TWO_PI;
  103.  
  104.       for (let j = 0; j < 10; j++) {
  105.         superShape(1, 1, 1 + m,
  106.           n1 / j,
  107.           n2,
  108.           n3, 
  109.           scl- j / 100,
  110.           x,
  111.           y,
  112.           z, rx, ry, rz)
  113.         }
  114.     }
  115.  
  116.     const overts = verts.concat()
  117.     const leng = verts.length / 3
  118.  
  119.     bindBuffer(ARRAY_BUFFER, createBuffer())
  120.     bufferData(ARRAY_BUFFER, new Float32Array(verts), STATIC_DRAW)
  121.  
  122.     const vs = createShader(VERTEX_SHADER)
  123.     shaderSource(vs, vert)
  124.     compileShader(vs)
  125.  
  126.     const fs = createShader(FRAGMENT_SHADER)
  127.     const sp = createProgram()
  128.  
  129.     shaderSource(fs, frag)
  130.     compileShader(fs)
  131.     attachShader(sp, vs)
  132.     attachShader(sp, fs)
  133.     linkProgram(sp)
  134.     useProgram(sp)
  135.  
  136.     const vec = getAttribLocation(sp, 'vec')
  137.     vertexAttribPointer(vec, 3, FLOAT, false, 0, 0)
  138.     enableVertexAttribArray(vec)
  139.  
  140.     const matLoc = getUniformLocation(sp, 'mat')
  141.  
  142.     function rot(x, y, z) {
  143.       // https://wikimedia.org/api/rest_v1/media/math/render/svg/a8e16f4967571b7a572d1a19f3f6468512f9843e
  144.  
  145.       const sinA = Math.sin(x)
  146.       const cosA = Math.cos(x)
  147.       const sinB = Math.sin(y)
  148.       const cosB = Math.cos(y)
  149.       const sinY = Math.sin(z)
  150.       const cosY = Math.cos(z)
  151.  
  152.       m[0] = cosA * cosB
  153.       m[1] = cosA * sinB * sinY - sinA * cosY
  154.       m[2] = cosA * sinB * cosY + sinA * sinY
  155.       m[3] = 0
  156.  
  157.       m[4] = sinA * cosB
  158.       m[5] = sinA * sinB * sinY + cosA * cosY
  159.       m[6] = sinA * sinB * cosY - cosA * sinY
  160.       m[7] = 0
  161.  
  162.       m[8] = -sinB
  163.       m[9] = cosB * sinY
  164.       m[10] = cosB * cosY
  165.       m[11] = m[12] = m[13] = 0
  166.       m[15] = 1
  167.  
  168.       uniformMatrix4fv(matLoc, false, m)
  169.     }
  170.  
  171.     onresize = () => {
  172.       const {
  173.         canvas
  174.       } = gl
  175.       const size = Math.min(innerWidth, innerHeight) - 20
  176.       canvas.width = canvas.height = size
  177.       viewport(0, 0, size, size)
  178.     }
  179.  
  180.     onresize()
  181.  
  182.     let rx = 0, ry = 0, rz = 0
  183.     let t = 0;
  184.     function loop() {
  185.       // rx += 0.01
  186.       // ry += 0.01
  187.       rz += 0.01
  188.       rot(rx, ry, rz)
  189.  
  190.       disable(DEPTH_TEST)
  191.       enable(BLEND)
  192.       blendFunc(SRC_ALPHA, ONE_MINUS_SRC_ALPHA)
  193.       clearColor(0, 0, 0, 1)
  194.       clear(COLOR_BUFFER_BIT)
  195.  
  196.       for (let i = 0; i < verts.length; i += 3) {
  197.         let tof = t + i / 50000;  
  198.         verts[i] = Math.sin(tof) * overts[i]
  199.         verts[i + 1] = Math.sin(tof) * overts[i + 1]
  200.         verts[i + 2] = Math.sin(tof) * overts[i + 2]
  201.       }
  202.  
  203.       t += 0.01
  204.  
  205.       bufferSubData(ARRAY_BUFFER, 0, new Float32Array(verts))
  206.       drawArrays(POINTS, 0, leng)
  207.       window.requestAnimationFrame(loop)
  208.     }
  209.     loop()
  210.   }
  211. })()

Forked a recent snippet using supershapes for #genuary2022 – prompt was space…

WebGL Hemisphere Lines

  1. (() => {
  2.   const m = new Float32Array([
  3.     0, 0, 0, 0, 
  4.     0, 0, 0, 0, 
  5.     0, 0, 0, 0, 
  6.     0, 0, 0, 0])
  7.  
  8.   const pointSize = 4; 
  9.  
  10.   const vert = `
  11.     attribute vec3 vec;
  12.     uniform mat4 mat;
  13.     void main(void) {
  14.       gl_Position = mat * vec4(vec, 1.0);
  15.       gl_PointSize = ${pointSize}.0;
  16.     }
  17.   `
  18.  
  19.   const frag = `
  20.     void main(void) {
  21.       gl_FragColor = vec4(1., 1., 1., .5);
  22.     }
  23.   `
  24.  
  25.   document.body.style.background = '#232323'
  26.   const gl = document.body
  27.     .appendChild(document.createElement('canvas'))
  28.     .getContext('webgl', {
  29.       preserveDrawingBuffer: true,
  30.       powerPreference: 'high-performance'
  31.     })
  32.  
  33.   Object.assign(gl.canvas.style, {
  34.     position: 'absolute',
  35.     left: '50%',
  36.     top: '50%',
  37.     transform: 'translate(-50%, -50%)',
  38.     outline: '1px solid gray'
  39.   })
  40.  
  41.   with (gl) {
  42.     const NUM = 2000
  43.     const radius = 0.7
  44.     const verts = []
  45.  
  46.     for (let i = 0; i < NUM; i += 3) {
  47.       let xp = Math.random() * 2 - 1
  48.       let yp = Math.random() * 2 - 1
  49.       let zp = i / NUM; 
  50.       let dist = Math.sqrt(xp * xp + yp * yp + zp * zp)
  51.       // normalize and scale x,y,z
  52.       verts[i] = (xp / dist) * radius
  53.       verts[i + 1] = (yp / dist) * radius
  54.       verts[i + 2] = (zp / dist) * radius
  55.     }
  56.     const overts = verts.concat()
  57.     const leng = verts.length / 3
  58.  
  59.     bindBuffer(ARRAY_BUFFER, createBuffer())
  60.     bufferData(ARRAY_BUFFER, new Float32Array(verts), STATIC_DRAW)
  61.  
  62.     const vs = createShader(VERTEX_SHADER)
  63.     shaderSource(vs, vert)
  64.     compileShader(vs)
  65.  
  66.     const fs = createShader(FRAGMENT_SHADER)
  67.     const sp = createProgram()
  68.  
  69.     shaderSource(fs, frag)
  70.     compileShader(fs)
  71.     attachShader(sp, vs)
  72.     attachShader(sp, fs)
  73.     linkProgram(sp)
  74.     useProgram(sp)
  75.  
  76.     const vec = getAttribLocation(sp, 'vec')
  77.     vertexAttribPointer(vec, 3, FLOAT, false, 0, 0)
  78.     enableVertexAttribArray(vec)
  79.  
  80.     const matLoc = getUniformLocation(sp, 'mat')
  81.  
  82.     function rot(x, y, z) {
  83.       // https://wikimedia.org/api/rest_v1/media/math/render/svg/a8e16f4967571b7a572d1a19f3f6468512f9843e
  84.  
  85.       const sinA = Math.sin(x)
  86.       const cosA = Math.cos(x)
  87.       const sinB = Math.sin(y)
  88.       const cosB = Math.cos(y)
  89.       const sinY = Math.sin(z)
  90.       const cosY = Math.cos(z)
  91.  
  92.       m[0] = cosA * cosB
  93.       m[1] = cosA * sinB * sinY - sinA * cosY
  94.       m[2] = cosA * sinB * cosY + sinA * sinY
  95.       m[3] = 0
  96.  
  97.       m[4] = sinA * cosB
  98.       m[5] = sinA * sinB * sinY + cosA * cosY
  99.       m[6] = sinA * sinB * cosY - cosA * sinY
  100.       m[7] = 0
  101.  
  102.       m[8] = -sinB
  103.       m[9] = cosB * sinY
  104.       m[10] = cosB * cosY
  105.       m[11] = m[12] = m[13] = 0
  106.       m[15] = 1
  107.  
  108.       uniformMatrix4fv(matLoc, false, m)
  109.     }
  110.  
  111.     onresize = () => {
  112.       const { canvas } = gl
  113.       const size = Math.min(innerWidth, innerHeight) - 20
  114.       canvas.width = canvas.height = size
  115.       viewport(0, 0, size, size)
  116.     }
  117.  
  118.     onresize()
  119.  
  120.     let rx = 0
  121.     let ry = 0
  122.     let rz = 0
  123.     let t = 0
  124.  
  125.     function loop() {
  126.       rx += 0.005
  127.       ry += 0.005
  128.       rot(rx, ry, rz)
  129.  
  130.       disable(DEPTH_TEST)
  131.       enable(BLEND)
  132.       blendFunc(SRC_ALPHA, ONE_MINUS_SRC_ALPHA)
  133.  
  134.       clearColor(0, 0, 0, 1)
  135.  
  136.       clear(COLOR_BUFFER_BIT)
  137.  
  138.       for (let i = 0; i < verts.length; i += 3) {
  139.         let tof = i * 0.001 + t;
  140.         verts[i] = Math.sin(tof) * overts[i]
  141.         verts[i + 1] = Math.sin(tof) * overts[i + 1]
  142.         verts[i + 2] = Math.sin(tof) * overts[i + 2]
  143.       }
  144.  
  145.       t += 0.005
  146.  
  147.       bufferSubData(ARRAY_BUFFER, 0, new Float32Array(verts))
  148.  
  149.       drawArrays(LINES, 0, leng)
  150.       drawArrays(POINTS, 0, leng)
  151.       window.requestAnimationFrame(loop)
  152.     }
  153.     loop()
  154.   }
  155. })()

WebGL lines and points…

snippet.zone ~ 2021-22 /// {s/z}