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

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
snippet.zone ~ 2021-24 /// {s/z}