diff --git a/_assets/javascript/shaderCanvas4.js b/_assets/javascript/shaderCanvas4.js new file mode 100644 index 0000000..27ca2db --- /dev/null +++ b/_assets/javascript/shaderCanvas4.js @@ -0,0 +1,183 @@ +var shader_time = 0.0; + +window.addEventListener("load", main); +function main() { + const canvas = document.querySelector('#webgl-canvas'); + 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 + 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 + // for aVertexPosition, aVevrtexColor and also + // look up uniform locations. + const programInfo = { + program: shaderProgram, + attribLocations: { + vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'), + }, + uniformLocations: { + projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'), + modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'), + uResolution: gl.getUniformLocation(shaderProgram, 'uResolution'), + 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); + var then = 0; + // Draw the scene repeatedly + function render(now) { + now *= 0.001; // convert to seconds + const deltaTime = now - then; + then = now; + drawScene(gl, programInfo, buffers, deltaTime); + requestAnimationFrame(render); + } + requestAnimationFrame(render); +} + +// +// initBuffers +// +// Initialize the buffers we'll need. For this demo, we just +// have one object -- a simple two-dimensional square. +// +function initBuffers(gl) { + // Create a buffer for the square's positions. + const positionBuffer = gl.createBuffer(); + // Select the positionBuffer as the one to apply buffer operations to from here out. + gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); + // Now create an array of positions for the square. + const positions = [ + 1.0, 1.0, + -1.0, 1.0, + 1.0, -1.0, + -1.0, -1.0, + ]; + // Now pass the list of positions into WebGL to build the + // shape. We do this by creating a Float32Array from the + // JavaScript array, then use it to fill the current buffer. + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); + return { + position: positionBuffer, + }; +} + +// +// Draw the scene. +// +function drawScene(gl, programInfo, buffers, deltaTime) { + gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear to black, fully opaque + gl.clearDepth(1.0); // Clear everything + gl.enable(gl.DEPTH_TEST); // Enable depth testing + gl.depthFunc(gl.LEQUAL); // Near things obscure far things + + // Clear the canvas before we start drawing on it. + gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); + + // Create a orthographic matrix + const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight; + const zNear = 0.0; + const zFar = 100.0; + const projectionMatrix = mat4.create(); + + // note: glmatrix.js always has the first argument as the destination to receive the result. + mat4.ortho(projectionMatrix, -1.0, 1.0, -1.0, 1.0, zNear, zFar); + // 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 + { + const numComponents = 2; + const type = gl.FLOAT; + const normalize = false; + 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); + } + + // Tell WebGL to use our program when drawing + gl.useProgram(programInfo.program); + + // 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.uniform1f(programInfo.uniformLocations.uTime, shader_time); + { + const offset = 0; + const vertexCount = 4; + gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount); + } + // Update time: + shader_time += deltaTime; +} + +// +// Initialize a shader program, so WebGL knows how to draw our data +// +function initShaderProgram(gl, vsSource, fsSource) { + const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource); + const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource); + // Create the shader program + const shaderProgram = gl.createProgram(); + gl.attachShader(shaderProgram, vertexShader); + gl.attachShader(shaderProgram, fragmentShader); + gl.linkProgram(shaderProgram); + // If creating the shader program failed, alert + if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { + alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram)); + return null; + } + return shaderProgram; +} + +// +// creates a shader of the given type, uploads the source and compiles it. +// +function loadShader(gl, type, source) { + const shader = gl.createShader(type); + gl.shaderSource(shader, source); // Send the source to the shader object + gl.compileShader(shader); // Compile the shader program + // See if it compiled successfully + if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { + alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader)); + gl.deleteShader(shader); + return null; + } + + return shader; +} + diff --git a/_posts/2021-06-02-more-shaders.markdown b/_posts/2021-06-02-more-shaders.markdown new file mode 100644 index 0000000..65a3091 --- /dev/null +++ b/_posts/2021-06-02-more-shaders.markdown @@ -0,0 +1,32 @@ +--- +layout: post-plain +title: "More Shaders" +date: 2021-06-02 +categories: design coding +--- + + + + + +{% asset gl-matrix-min-2.8.1.js %} +{% asset shaderCanvas4.js %}