Adding episode 23 Arrays and UBO code

Author: Andrew Adamson

23.arrays.ubo.js

@@ -0,0 +1,137 @@
+const vertexShaderSource = `#version 300 es
+#pragma vscode_glsllint_stage: vert
+
+layout(location=0) in vec4 aPosition;
+layout(location=1) in vec3 aNormal;
+
+out vec3 vPosition;
+out vec3 vNormal;
+
+void main()
+{
+    gl_Position = aPosition;
+    vPosition = gl_Position.xyz;
+    vNormal = aNormal;
+}`;
+
+const fragmentShaderSource = `#version 300 es
+#pragma vscode_glsllint_stage: frag
+
+precision mediump float;
+
+uniform sampler2D sampler;
+
+in vec3 vNormal;
+in vec3 vPosition;
+
+out vec4 fragColor;
+
+struct Spotlight
+{
+    vec4 location;
+    vec4 direction;
+    vec4 angles;   // x = innerConeAngle, y = outerConeAngle
+    vec4 texCoord; // xy = texCoord UV
+};
+
+layout(std140) uniform Lighting
+{
+    Spotlight spotlight[10];
+};
+
+void main()
+{
+    for (int x = 0; x < 10; x++)
+    {
+        vec3 offset = spotlight[x].location.xyz - vPosition;
+        vec3 surfaceToLight = normalize(offset);
+        float distance = length(surfaceToLight);
+        float angleToSurface = dot(spotlight[x].direction.xyz, -surfaceToLight);
+    
+        float diffuse = max(0.0, dot(surfaceToLight, normalize(vNormal)));
+        float attenuation = 1.0 / (distance * distance);
+        float spot = smoothstep(spotlight[x].angles.x, spotlight[x].angles.y, angleToSurface);
+    
+        float brightness = spot * attenuation * diffuse;
+    
+        vec4 color = texture(sampler, spotlight[x].texCoord.xy) * brightness;
+        fragColor += color;
+    }
+
+    fragColor.a = 1.0;
+}`;
+
+const canvas = document.querySelector('canvas');
+const gl = canvas.getContext('webgl2');
+
+const program = gl.createProgram();
+
+const vertexShader = gl.createShader(gl.VERTEX_SHADER);
+gl.shaderSource(vertexShader, vertexShaderSource);
+gl.compileShader(vertexShader);
+gl.attachShader(program, vertexShader);
+
+const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+gl.shaderSource(fragmentShader, fragmentShaderSource);
+gl.compileShader(fragmentShader);
+gl.attachShader(program, fragmentShader);
+
+gl.linkProgram(program);
+
+if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    console.log(gl.getShaderInfoLog(vertexShader));
+    console.log(gl.getShaderInfoLog(fragmentShader));
+}
+
+gl.useProgram(program);
+
+// Geometry (just one quad)
+const quad = new Float32Array([
+    // position           normal
+    -.75, -.75, 0,        0,0,-1,
+    0.75, -.75, 0,        0,0,-1,
+    0.75, 0.75, 0,        0,0,-1,
+    0.75, 0.75, 0,        0,0,-1,
+    -.75, 0.75, 0,        0,0,-1,
+    -.75, -.75, 0,        0,0,-1,
+]);
+
+const quadBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, quadBuffer);
+gl.bufferData(gl.ARRAY_BUFFER, quad, gl.STATIC_DRAW);
+gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 24, 0);
+gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 24, 12);
+gl.enableVertexAttribArray(0);
+gl.enableVertexAttribArray(1);
+
+// Light colours
+const tex = gl.createTexture();
+gl.bindTexture(gl.TEXTURE_2D, tex);
+gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 2,2,0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([
+    255,0,0,255,        0,255,0,255,        // red   green
+    0,0,255,255,        255,255,255,255,    // blue  white
+]));
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+
+const _ = 0;
+const lightData = new Float32Array([
+    // Chunk 1               Chunk 2                 Chunk 3
+    // position              direction               innerCone outerCone texCoord
+    0.500,0.000,-.200,_,     -.500,0.000,.125,_,     0.278,    0.362,_,_,    .25,.25,_,_,
+    0.405,0.294,-.200,_,     -.405,-.294,.125,_,     0.322,    0.418,_,_,    .25,.75,_,_,
+    0.155,0.476,-.200,_,     -.155,-.476,.125,_,     0.386,    0.501,_,_,    .75,.75,_,_,
+    -.155,0.476,-.200,_,     0.155,-.476,.125,_,     0.273,    0.355,_,_,    .75,.25,_,_,
+    -.405,0.294,-.200,_,     0.405,-.294,.125,_,     0.276,    0.359,_,_,    .25,.25,_,_,
+    -.500,0.000,-.200,_,     0.500,-.000,.125,_,     0.345,    0.448,_,_,    .25,.75,_,_,
+    -.405,-.294,-.200,_,     0.405,0.294,.125,_,     0.295,    0.383,_,_,    .75,.75,_,_,
+    -.155,-.476,-.200,_,     0.155,0.476,.125,_,     0.300,    0.390,_,_,    .75,.25,_,_,
+    0.155,-.476,-.200,_,     -.155,0.476,.125,_,     0.242,    0.315,_,_,    .25,.25,_,_,
+    0.405,-.294,-.200,_,     -.405,0.294,.125,_,     0.365,    0.475,_,_,    .25,.75,_,_,
+]);
+
+const buffer = gl.createBuffer();
+gl.bindBufferBase(gl.UNIFORM_BUFFER, 0, buffer);
+gl.bufferData(gl.UNIFORM_BUFFER, lightData, gl.STATIC_DRAW);
+gl.uniformBlockBinding(program, gl.getUniformBlockIndex(program, 'Lighting'), 0);
+
+gl.drawArrays(gl.TRIANGLES, 0, 6);