diff --git a/_assets/javascript/shaderCanvas4.js b/_assets/javascript/shaderCanvas4.js index 27ca2db..9681405 100644 --- a/_assets/javascript/shaderCanvas4.js +++ b/_assets/javascript/shaderCanvas4.js @@ -1,17 +1,52 @@ var shader_time = 0.0; +var canvas_size = new Array(2); window.addEventListener("load", main); function main() { - const canvas = document.querySelector('#webgl-canvas'); + var canvas = document.querySelector('#webgl-canvas'); + const canvasses = document.querySelectorAll('.webgl-shader-canvas'); + if (canvasses.length == 0) { + console.log("WebGL script requires at least one canvas with class 'webgl-shader-canvas''"); + return + } + canvasses.forEach(function(canvas){ + if (!canvas.getAttributeNames().includes("data-fs-source") || !canvas.getAttributeNames().includes("data-fs-source")) { + console.log("WebGL script requires a canvas with data-fs-source and data-vs-source attributes."); + return + } + // load vertex shader + const vsxhttp = new XMLHttpRequest(); + vsxhttp.onreadystatechange = function() { + if (this.readyState == 4 && this.status == 200) { + const vsSource = vsxhttp.responseText; + // load fragment shader + const fsxhttp = new XMLHttpRequest(); + fsxhttp.onreadystatechange = function() { + if (this.readyState == 4 && this.status == 200) { + const fsSource = fsxhttp.responseText; + // console.log(fsSource); + // console.log(fsSource); + // Shaders loaded, begin the webgl render: + webglRender(canvas, vsSource, fsSource); + } + } + fsxhttp.open('GET',canvas.getAttribute('data-fs-source')); + fsxhttp.send(); + } + } + vsxhttp.open('GET',canvas.getAttribute('data-vs-source')); + vsxhttp.send(); + }); +} + +function webglRender(canvas, vsSource, fsSource) { const gl = canvas.getContext('webgl'); // If we don't have a GL context, give up now if (!gl) { alert('Unable to initialize WebGL. Your browser or machine may not support it.'); return; } - - const vsSource = document.querySelector("#webgl-canvas #vertex-shader").innerHTML; // Vertex shader program - const fsSource = document.querySelector("#webgl-canvas #fragment-shader").innerHTML; // fragment shader program + canvas_size[0] = canvas.width; canvas_size[1] = canvas.height; const shaderProgram = initShaderProgram(gl, vsSource, fsSource); // Collect all the info needed to use the shader program. // Look up which attributes our shader program is using @@ -29,7 +64,6 @@ function main() { uTime: gl.getUniformLocation(shaderProgram, 'uTime'), }, }; - // Here's where we call the routine that builds all the // objects we'll be drawing. const buffers = initBuffers(gl); @@ -40,9 +74,9 @@ function main() { const deltaTime = now - then; then = now; drawScene(gl, programInfo, buffers, deltaTime); - requestAnimationFrame(render); + window.requestAnimationFrame(render); } - requestAnimationFrame(render); + window.requestAnimationFrame(render); } // @@ -95,18 +129,6 @@ function drawScene(gl, programInfo, buffers, deltaTime) { // Set the drawing position to the "identity" point, which is // the center of the scene. const modelViewMatrix = mat4.create(); - - // Now move the drawing position a bit to where we want to - // start drawing the square. - - // mat4.translate(modelViewMatrix, // destination matrix - // modelViewMatrix, // matrix to translate - // [-0.0, 0.0, -0.0]); // amount to translate - // mat4.rotate(modelViewMatrix, // destination matrix - // modelViewMatrix, // matrix to rotate - // squareRotation, // amount to rotate in radians - // [0, 0, 1]); // axis to rotate around - // Tell WebGL how to pull out the positions from the position // buffer into the vertexPosition attribute { @@ -116,15 +138,8 @@ function drawScene(gl, programInfo, buffers, deltaTime) { const stride = 0; const offset = 0; gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position); - gl.vertexAttribPointer( - programInfo.attribLocations.vertexPosition, - numComponents, - type, - normalize, - stride, - offset); - gl.enableVertexAttribArray( - programInfo.attribLocations.vertexPosition); + gl.vertexAttribPointer(programInfo.attribLocations.vertexPosition, numComponents, type, normalize, stride, offset); + gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition); } // Tell WebGL to use our program when drawing @@ -133,8 +148,7 @@ function drawScene(gl, programInfo, buffers, deltaTime) { // Set the shader uniforms gl.uniformMatrix4fv(programInfo.uniformLocations.projectionMatrix, false, projectionMatrix); gl.uniformMatrix4fv(programInfo.uniformLocations.modelViewMatrix, false, modelViewMatrix); - var size = [1280.0, 720.0] //TODO: make this size of canvas and change on window resize - gl.uniform2f(programInfo.uniformLocations.uResolution, size[0], size[1]); + gl.uniform2f(programInfo.uniformLocations.uResolution, canvas_size[0], canvas_size[1]); gl.uniform1f(programInfo.uniformLocations.uTime, shader_time); { const offset = 0; @@ -180,4 +194,3 @@ function loadShader(gl, type, source) { return shader; } - diff --git a/_posts/2021-06-02-more-shaders.markdown b/_posts/2021-06-02-more-shaders.markdown index 65a3091..640d1e5 100644 --- a/_posts/2021-06-02-more-shaders.markdown +++ b/_posts/2021-06-02-more-shaders.markdown @@ -4,29 +4,9 @@ title: "More Shaders" date: 2021-06-02 categories: design coding --- - - - - + + + {% asset gl-matrix-min-2.8.1.js %} {% asset shaderCanvas4.js %} diff --git a/assets/circleShader.glsl b/assets/circleShader.glsl new file mode 100644 index 0000000..ab12743 --- /dev/null +++ b/assets/circleShader.glsl @@ -0,0 +1,10 @@ +#version 100 +precision mediump float; +uniform float uTime; +uniform vec2 uResolution; +uniform vec4 uFragColor; +void main() { + vec2 uv = gl_FragCoord.xy / uResolution.xy; + // gl_FragColor = vec4(uv.x, uv.y, sin(uTime * 1.0), 1.0); + gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0); +} diff --git a/assets/testShader.glsl b/assets/testShader.glsl new file mode 100644 index 0000000..300df84 --- /dev/null +++ b/assets/testShader.glsl @@ -0,0 +1,10 @@ +#version 100 +precision mediump float; +uniform float uTime; +uniform vec2 uResolution; +uniform vec4 uFragColor; +void main() { + vec2 uv = gl_FragCoord.xy / uResolution.xy; + gl_FragColor = vec4(uv.x, uv.y, sin(uTime * 1.0), 1.0); + //gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0); +} diff --git a/assets/vertShader.glsl b/assets/vertShader.glsl new file mode 100644 index 0000000..db1455f --- /dev/null +++ b/assets/vertShader.glsl @@ -0,0 +1,8 @@ +#version 100 +precision highp float; +attribute vec4 aVertexPosition; +uniform mat4 uModelViewMatrix; +uniform mat4 uProjectionMatrix; +void main(void) { + gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition; +}