Snippet Zone

WebGL Shader Example

```
(() => {
```
```
 
```
```
  const vert = `
```
```
    attribute vec3 vec;
```
```
    void main(void) {
```
```
      gl_Position = vec4(vec, 1.);
```
```
    }
```
```
  `
```
```
 
```
```
  const frag = `
```
```
    #ifdef GL_ES
```
```
    precision highp float;
```
```
    #endif
```
```
    uniform float time;
```
```
    void main(void) {
```

      vec2 uv = gl_FragCoord.xy  / vec2(500., 500.);

      float w = 1. + cos(uv.y * 60.) * cos(uv.x * 50. + time * 30.);

      gl_FragColor = vec4(uv.x, w * .5, w, 1.);

```
    }
```
```
  `
```
```
 
```

  document.body.style.background = '#000'

```
  const gl = document.body
```

    .appendChild(document.createElement('canvas'))

```
    .getContext('webgl')
```
```
 
```
```
  Object.assign(gl.canvas.style, {
```
```
    position: 'absolute',
```
```
    left: 0,
```
```
    top: 0
```
```
  })
```
```
 
```
```
  with (gl) {
```
```
    const s = 1;
```
```
    const verts = [
```
```
      -s, -s, 0,
```
```
       s, -s, 0,
```
```
      -s,  s, 0,
```
```
       s,  s, 0,
```
```
    ]
```
```
 
```
```
    const leng = verts.length / 3
```

    bindBuffer(ARRAY_BUFFER, createBuffer())

    bufferData(ARRAY_BUFFER, new Float32Array(verts), STATIC_DRAW)

```
 
```

    const vs = createShader(VERTEX_SHADER)

```
    shaderSource(vs, vert)
```
```
    compileShader(vs)
```
```
 
```

    const fs = createShader(FRAGMENT_SHADER)

```
    const sp = createProgram()
```
```
 
```
```
    shaderSource(fs, frag)
```
```
    compileShader(fs)
```
```
    attachShader(sp, vs)
```
```
    attachShader(sp, fs)
```
```
    linkProgram(sp)
```
```
    useProgram(sp)
```
```
 
```

    const vec = getAttribLocation(sp, 'vec')

    vertexAttribPointer(vec, 3, FLOAT, false, 0, 0)

```
    enableVertexAttribArray(vec)
```
```
 
```
```
    onresize = () => {
```
```
      const { canvas } = gl 
```
```
      canvas.width = innerWidth
```
```
      canvas.height = innerHeight
```

      viewport(0, 0, innerWidth, innerHeight)

```
    }
```
```
 
```
```
    onresize()
```
```
 
```
```
    disable(DEPTH_TEST)
```
```
    enable(BLEND)
```

    blendFunc(SRC_ALPHA, ONE_MINUS_SRC_ALPHA)

```
 
```
```
    const startTime = Date.now();
```
```
 
```
```
    function loop() {
```

      const time = (Date.now() - startTime) / 1000

      const uniformTime = gl.getUniformLocation(sp, 'time');

```
      gl.uniform1f(uniformTime, time);
```
```
 
```
```
      clearColor(0, 0, 0, 1)
```
```
      clear(COLOR_BUFFER_BIT)
```

      drawArrays(TRIANGLE_STRIP, 0, leng)

```
      requestAnimationFrame(loop)
```
```
    }
```
```
    loop()
```
```
  }
```
```
})()
```

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

March 13, 2022

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

Non-perspective WebGL Texture

```
(() => {
```
```
  const m = new Float32Array([
```
```
    0, 0, 0, 0, 
```
```
    0, 0, 0, 0, 
```
```
    0, 0, 0, 0, 
```
```
    0, 0, 0, 0
```
```
  ])
```
```
 
```

  const pointSize = Math.max(Math.min(10, ~~(innerWidth / 70)), 3);

```
 
```
```
  const vert = `
```
```
    attribute vec3 vec;
```
```
    uniform mat4 mat;
```
```
    void main(void) {
```

      gl_Position = mat * vec4(vec, 1.);

```
      gl_PointSize = ${pointSize}.;
```
```
    }
```
```
  `
```
```
 
```
```
  const frag = `
```
```
    #ifdef GL_ES
```
```
    precision highp float;
```
```
    #endif
```
```
    void main(void) {
```

      vec2 uv = gl_FragCoord.xy  / vec2(500., 500.);

      gl_FragColor = vec4(uv.x, 0., cos(uv.y * 60.), .4);

```
    }
```
```
  `
```
```
 
```

  document.body.style.background = '#333'

```
  const gl = document.body
```

    .appendChild(document.createElement('canvas'))

```
    .getContext('webgl')
```
```
 
```
```
  Object.assign(gl.canvas.style, {
```
```
    position: 'absolute',
```
```
    left: '50%',
```
```
    top: '50%',
```
```
    transform: 'translate(-50%, -50%)',
```
```
    outline: '1px solid gray'
```
```
  })
```
```
 
```
```
  with (gl) {
```
```
    const NUM = 3
```
```
    const s = .5;
```
```
    const verts = [
```
```
      -s, -s, 0,
```
```
       s, -s, 0,
```
```
      -s,  s, 0,
```
```
       s,  s, 0,
```
```
    ]
```
```
 
```
```
    //  1.0,  1.0,
```
```
    // -1.0,  1.0,
```
```
    //  1.0, -1.0,
```
```
    // -1.0, -1.0,
```
```
 
```
```
    // for (let i = 0; i < NUM; i++) {
```
```
    //   verts.push(
```
```
    //     Math.random() * 1 - 0.5,
```
```
    //     Math.random() * 1 - 0.5,
```
```
    //     Math.random() * 1 - 0.5
```
```
    //   )
```
```
    // }
```
```
 
```
```
    const leng = verts.length / 3
```

    bindBuffer(ARRAY_BUFFER, createBuffer())

    bufferData(ARRAY_BUFFER, new Float32Array(verts), STATIC_DRAW)

```
 
```

    const vs = createShader(VERTEX_SHADER)

```
    shaderSource(vs, vert)
```
```
    compileShader(vs)
```
```
 
```

    const fs = createShader(FRAGMENT_SHADER)

```
    const sp = createProgram()
```
```
 
```
```
    shaderSource(fs, frag)
```
```
    compileShader(fs)
```
```
    attachShader(sp, vs)
```
```
    attachShader(sp, fs)
```
```
    linkProgram(sp)
```
```
    useProgram(sp)
```
```
 
```

    const vec = getAttribLocation(sp, 'vec')

    vertexAttribPointer(vec, 3, FLOAT, false, 0, 0)

```
    enableVertexAttribArray(vec)
```
```
 
```

    const matLoc = getUniformLocation(sp, 'mat')

```
 
```
```
    function rot(x, y, z) {
```

      // https://wikimedia.org/api/rest_v1/media/math/render/svg/a8e16f4967571b7a572d1a19f3f6468512f9843e

```
 
```
```
      const sinA = Math.sin(x)
```
```
      const cosA = Math.cos(x)
```
```
      const sinB = Math.sin(y)
```
```
      const cosB = Math.cos(y)
```
```
      const sinY = Math.sin(z)
```
```
      const cosY = Math.cos(z)
```
```
 
```
```
      m[0] = cosA * cosB
```

      m[1] = cosA * sinB * sinY - sinA * cosY

      m[2] = cosA * sinB * cosY + sinA * sinY

```
      m[3] = 0
```
```
 
```
```
      m[4] = sinA * cosB
```

      m[5] = sinA * sinB * sinY + cosA * cosY

      m[6] = sinA * sinB * cosY - cosA * sinY

```
      m[7] = 0
```
```
 
```
```
      m[8] = -sinB
```
```
      m[9] = cosB * sinY
```
```
      m[10] = cosB * cosY
```
```
      m[11] = m[12] = m[13] = 0
```
```
      m[15] = 1
```
```
 
```

      uniformMatrix4fv(matLoc, false, m)

```
    }
```
```
 
```
```
    onresize = () => {
```
```
      const { canvas } = gl
```

      const size = Math.min(innerWidth, innerHeight) - 20

      canvas.width = canvas.height = size

```
      viewport(0, 0, size, size)
```
```
    }
```
```
 
```
```
    onresize()
```
```
 
```
```
    let rx = 0, ry = 0
```
```
 
```
```
    disable(DEPTH_TEST)
```
```
    enable(BLEND)
```

    blendFunc(SRC_ALPHA, ONE_MINUS_SRC_ALPHA)

```
 
```
```
    function loop() {
```
```
      rot(rx += .01, ry += .01, 0)
```
```
 
```
```
      clearColor(0, 0, 0, 1)
```
```
      clear(COLOR_BUFFER_BIT)
```

      drawArrays(TRIANGLE_STRIP, 0, leng)

      window.requestAnimationFrame(loop)

```
    }
```
```
    loop()
```
```
  }
```
```
})()
```

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…

February 23, 2022

// canvas // webgl

Many WebGL Constants

```
console.log(
```

  Object.getOwnPropertyNames(WebGLRenderingContext)

```
)
```

January 20, 2022

// tricks // webgl

Speed Coded Space

```
(() => {
```
```
  const TWO_PI = Math.PI * 2;
```
```
  const m = new Float32Array([
```
```
    0, 0, 0, 0,
```
```
    0, 0, 0, 0,
```
```
    0, 0, 0, 0,
```
```
    0, 0, 0, 0
```
```
  ])
```
```
 
```
```
  const vert = `
```
```
    attribute vec3 vec;
```
```
    uniform mat4 mat;
```
```
    void main(void) {
```

      gl_Position = mat * vec4(vec, 1.0);

```
      gl_PointSize = 2.0;
```
```
    }
```
```
  `
```
```
 
```
```
  const frag = `
```
```
    void main(void) {
```

      gl_FragColor = vec4(1., 1., 1., .25);

```
    }
```
```
  `
```
```
 
```

  document.body.style.background = '#232323'

```
  const gl = document.body
```

    .appendChild(document.createElement('canvas'))

```
    .getContext('webgl', {
```
```
      preserveDrawingBuffer: true,
```

      powerPreference: 'high-performance'

```
    })
```
```
 
```
```
  Object.assign(gl.canvas.style, {
```
```
    position: 'absolute',
```
```
    left: '50%',
```
```
    top: '50%',
```
```
    transform: 'translate(-50%, -50%)',
```
```
    outline: '1px solid gray'
```
```
  })
```
```
 
```
```
 
```
```
  with(gl) {
```
```
    const NUM = 50
```
```
    const radius = 0.7
```
```
    let verts = []
```
```
 
```
```
    // Superformula (equations from):
```

    // https://bsapubs.onlinelibrary.wiley.com/doi/10.3732/ajb.90.3.333

    // http://en.wikipedia.org/wiki/Superformula

    function superShape(a, b, m, n1, n2, n3, scale, x = 0, y = 0, z = 0, rx=0, ry=0, rz=0) {

      const { random, pow, abs, cos, sin } = Math

      // with(Math) { // destrucuring vs the dreaded `with`

```
        let r = 0
```
```
        let p = 0
```
```
        let xp = 0
```
```
        let yp = 0
```
```
        let zp = 0
```
```
 
```
```
        let rotX = rx
```
```
        let rotY = ry  
```
```
        let rotZ = rz
```
```
 
```
```
        let cosX = cos(rotX)
```
```
        let cosY = cos(rotY)
```
```
        let sinX = sin(rotX)
```
```
        let sinY = sin(rotY)
```
```
 
```
```
        while (p <= TWO_PI) {
```
```
          let ang = (m * p) / 4
```
```
 
```

          r = pow(pow(abs(cos(ang) / a), n2) + pow(abs(sin(ang) / b), n3), -1 / n1)

```
          xp = r * cos(p)
```
```
          yp = r * sin(p)
```
```
 
```
```
          p += 0.05
```
```
 
```
```
          zp = zp * cosX - xp * sinX
```
```
          xp = zp * sinX + xp * cosX
```
```
          yp = yp * cosY - zp * sinY
```
```
          zp = yp * sinY + zp * cosY
```
```
 
```
```
          verts[inc] = xp * scale + x
```

          verts[inc + 1] = yp * scale + y

          verts[inc + 2] = zp * scale + z

```
          inc += 3;
```
```
        }
```
```
      // }
```
```
    }
```
```
 
```
```
    let inc = 0; 
```
```
    for (let i = 0; i < NUM; i++) {
```
```
      let m =  Math.random() * 20
```
```
      let n1 = Math.random() * 30
```
```
      let n2 = Math.random() * 30
```
```
      let n3 = Math.random() * 30
```
```
      let scl = Math.random() * .2
```

      let x = Math.random() * Math.cos(i)

      let y = Math.random() * Math.sin(i);

```
      let z = Math.random() - .5
```
```
      let rx = Math.random() * TWO_PI,
```
```
          ry = Math.random() * TWO_PI,
```
```
          rz = Math.random() * TWO_PI;
```
```
 
```
```
      for (let j = 0; j < 10; j++) {
```
```
        superShape(1, 1, 1 + m,
```
```
          n1 / j,
```
```
          n2,
```
```
          n3, 
```
```
          scl- j / 100,
```
```
          x,
```
```
          y,
```
```
          z, rx, ry, rz)
```
```
        }
```
```
    }
```
```
 
```
```
    const overts = verts.concat()
```
```
    const leng = verts.length / 3
```
```
 
```

    bindBuffer(ARRAY_BUFFER, createBuffer())

    bufferData(ARRAY_BUFFER, new Float32Array(verts), STATIC_DRAW)

```
 
```

    const vs = createShader(VERTEX_SHADER)

```
    shaderSource(vs, vert)
```
```
    compileShader(vs)
```
```
 
```

    const fs = createShader(FRAGMENT_SHADER)

```
    const sp = createProgram()
```
```
 
```
```
    shaderSource(fs, frag)
```
```
    compileShader(fs)
```
```
    attachShader(sp, vs)
```
```
    attachShader(sp, fs)
```
```
    linkProgram(sp)
```
```
    useProgram(sp)
```
```
 
```

    const vec = getAttribLocation(sp, 'vec')

    vertexAttribPointer(vec, 3, FLOAT, false, 0, 0)

```
    enableVertexAttribArray(vec)
```
```
 
```

    const matLoc = getUniformLocation(sp, 'mat')

```
 
```
```
    function rot(x, y, z) {
```

      // https://wikimedia.org/api/rest_v1/media/math/render/svg/a8e16f4967571b7a572d1a19f3f6468512f9843e

```
 
```
```
      const sinA = Math.sin(x)
```
```
      const cosA = Math.cos(x)
```
```
      const sinB = Math.sin(y)
```
```
      const cosB = Math.cos(y)
```
```
      const sinY = Math.sin(z)
```
```
      const cosY = Math.cos(z)
```
```
 
```
```
      m[0] = cosA * cosB
```

      m[1] = cosA * sinB * sinY - sinA * cosY

      m[2] = cosA * sinB * cosY + sinA * sinY

```
      m[3] = 0
```
```
 
```
```
      m[4] = sinA * cosB
```

      m[5] = sinA * sinB * sinY + cosA * cosY

      m[6] = sinA * sinB * cosY - cosA * sinY

```
      m[7] = 0
```
```
 
```
```
      m[8] = -sinB
```
```
      m[9] = cosB * sinY
```
```
      m[10] = cosB * cosY
```
```
      m[11] = m[12] = m[13] = 0
```
```
      m[15] = 1
```
```
 
```

      uniformMatrix4fv(matLoc, false, m)

```
    }
```
```
 
```
```
    onresize = () => {
```
```
      const {
```
```
        canvas
```
```
      } = gl
```

      const size = Math.min(innerWidth, innerHeight) - 20

      canvas.width = canvas.height = size

```
      viewport(0, 0, size, size)
```
```
    }
```
```
 
```
```
    onresize()
```
```
 
```
```
    let rx = 0, ry = 0, rz = 0
```
```
    let t = 0;
```
```
    function loop() {
```
```
      // rx += 0.01
```
```
      // ry += 0.01
```
```
      rz += 0.01
```
```
      rot(rx, ry, rz)
```
```
 
```
```
      disable(DEPTH_TEST)
```
```
      enable(BLEND)
```

      blendFunc(SRC_ALPHA, ONE_MINUS_SRC_ALPHA)

```
      clearColor(0, 0, 0, 1)
```
```
      clear(COLOR_BUFFER_BIT)
```
```
 
```

      for (let i = 0; i < verts.length; i += 3) {

```
        let tof = t + i / 50000;  
```

        verts[i] = Math.sin(tof) * overts[i]

        verts[i + 1] = Math.sin(tof) * overts[i + 1]

        verts[i + 2] = Math.sin(tof) * overts[i + 2]

```
      }
```
```
 
```
```
      t += 0.01
```
```
 
```

      bufferSubData(ARRAY_BUFFER, 0, new Float32Array(verts))

```
      drawArrays(POINTS, 0, leng)
```

      window.requestAnimationFrame(loop)

```
    }
```
```
    loop()
```
```
  }
```
```
})()
```

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

January 3, 2022

// animation // canvas // javascript // speedcoding // webgl

WebGL Hemisphere Lines

```
(() => {
```
```
  const m = new Float32Array([
```
```
    0, 0, 0, 0, 
```
```
    0, 0, 0, 0, 
```
```
    0, 0, 0, 0, 
```
```
    0, 0, 0, 0])
```
```
 
```
```
  const pointSize = 4; 
```
```
 
```
```
  const vert = `
```
```
    attribute vec3 vec;
```
```
    uniform mat4 mat;
```
```
    void main(void) {
```

      gl_Position = mat * vec4(vec, 1.0);

```
      gl_PointSize = ${pointSize}.0;
```
```
    }
```
```
  `
```
```
 
```
```
  const frag = `
```
```
    void main(void) {
```

      gl_FragColor = vec4(1., 1., 1., .5);

```
    }
```
```
  `
```
```
 
```

  document.body.style.background = '#232323'

```
  const gl = document.body
```

    .appendChild(document.createElement('canvas'))

```
    .getContext('webgl', {
```
```
      preserveDrawingBuffer: true,
```

      powerPreference: 'high-performance'

```
    })
```
```
 
```
```
  Object.assign(gl.canvas.style, {
```
```
    position: 'absolute',
```
```
    left: '50%',
```
```
    top: '50%',
```
```
    transform: 'translate(-50%, -50%)',
```
```
    outline: '1px solid gray'
```
```
  })
```
```
 
```
```
  with (gl) {
```
```
    const NUM = 2000
```
```
    const radius = 0.7
```
```
    const verts = []
```
```
 
```
```
    for (let i = 0; i < NUM; i += 3) {
```
```
      let xp = Math.random() * 2 - 1
```
```
      let yp = Math.random() * 2 - 1
```
```
      let zp = i / NUM; 
```

      let dist = Math.sqrt(xp * xp + yp * yp + zp * zp)

```
      // normalize and scale x,y,z
```
```
      verts[i] = (xp / dist) * radius
```

      verts[i + 1] = (yp / dist) * radius

      verts[i + 2] = (zp / dist) * radius

```
    }
```
```
    const overts = verts.concat()
```
```
    const leng = verts.length / 3
```
```
 
```

    bindBuffer(ARRAY_BUFFER, createBuffer())

    bufferData(ARRAY_BUFFER, new Float32Array(verts), STATIC_DRAW)

```
 
```

    const vs = createShader(VERTEX_SHADER)

```
    shaderSource(vs, vert)
```
```
    compileShader(vs)
```
```
 
```

    const fs = createShader(FRAGMENT_SHADER)

```
    const sp = createProgram()
```
```
 
```
```
    shaderSource(fs, frag)
```
```
    compileShader(fs)
```
```
    attachShader(sp, vs)
```
```
    attachShader(sp, fs)
```
```
    linkProgram(sp)
```
```
    useProgram(sp)
```
```
 
```

    const vec = getAttribLocation(sp, 'vec')

    vertexAttribPointer(vec, 3, FLOAT, false, 0, 0)

```
    enableVertexAttribArray(vec)
```
```
 
```

    const matLoc = getUniformLocation(sp, 'mat')

```
 
```
```
    function rot(x, y, z) {
```

      // https://wikimedia.org/api/rest_v1/media/math/render/svg/a8e16f4967571b7a572d1a19f3f6468512f9843e

```
 
```
```
      const sinA = Math.sin(x)
```
```
      const cosA = Math.cos(x)
```
```
      const sinB = Math.sin(y)
```
```
      const cosB = Math.cos(y)
```
```
      const sinY = Math.sin(z)
```
```
      const cosY = Math.cos(z)
```
```
 
```
```
      m[0] = cosA * cosB
```

      m[1] = cosA * sinB * sinY - sinA * cosY

      m[2] = cosA * sinB * cosY + sinA * sinY

```
      m[3] = 0
```
```
 
```
```
      m[4] = sinA * cosB
```

      m[5] = sinA * sinB * sinY + cosA * cosY

      m[6] = sinA * sinB * cosY - cosA * sinY

```
      m[7] = 0
```
```
 
```
```
      m[8] = -sinB
```
```
      m[9] = cosB * sinY
```
```
      m[10] = cosB * cosY
```
```
      m[11] = m[12] = m[13] = 0
```
```
      m[15] = 1
```
```
 
```

      uniformMatrix4fv(matLoc, false, m)

```
    }
```
```
 
```
```
    onresize = () => {
```
```
      const { canvas } = gl
```

      const size = Math.min(innerWidth, innerHeight) - 20

      canvas.width = canvas.height = size

```
      viewport(0, 0, size, size)
```
```
    }
```
```
 
```
```
    onresize()
```
```
 
```
```
    let rx = 0
```
```
    let ry = 0
```
```
    let rz = 0
```
```
    let t = 0
```
```
 
```
```
    function loop() {
```
```
      rx += 0.005
```
```
      ry += 0.005
```
```
      rot(rx, ry, rz)
```
```
 
```
```
      disable(DEPTH_TEST)
```
```
      enable(BLEND)
```

      blendFunc(SRC_ALPHA, ONE_MINUS_SRC_ALPHA)

```
 
```
```
      clearColor(0, 0, 0, 1)
```
```
 
```
```
      clear(COLOR_BUFFER_BIT)
```
```
 
```

      for (let i = 0; i < verts.length; i += 3) {

```
        let tof = i * 0.001 + t;
```

        verts[i] = Math.sin(tof) * overts[i]

        verts[i + 1] = Math.sin(tof) * overts[i + 1]

        verts[i + 2] = Math.sin(tof) * overts[i + 2]

```
      }
```
```
 
```
```
      t += 0.005
```
```
 
```

      bufferSubData(ARRAY_BUFFER, 0, new Float32Array(verts))

```
 
```
```
      drawArrays(LINES, 0, leng)
```
```
      drawArrays(POINTS, 0, leng)
```

      window.requestAnimationFrame(loop)

```
    }
```
```
    loop()
```
```
  }
```
```
})()
```

WebGL lines and points…

January 1, 2022

// animation // canvas // graphics // javascript // speedcoding // webgl

Older Posts

WebGL Shader Example

Non-perspective WebGL Texture

Many WebGL Constants

Speed Coded Space

WebGL Hemisphere Lines

Recent

Archive