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;
+}