Improved shader scripts

master
jahnertz 2021-06-03 13:26:19 +10:00
parent 7899c229ee
commit e0199bce74
5 changed files with 75 additions and 54 deletions

View File

@ -1,17 +1,52 @@
var shader_time = 0.0; var shader_time = 0.0;
var canvas_size = new Array(2);
window.addEventListener("load", main); window.addEventListener("load", main);
function 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'); const gl = canvas.getContext('webgl');
// If we don't have a GL context, give up now // If we don't have a GL context, give up now
if (!gl) { if (!gl) {
alert('Unable to initialize WebGL. Your browser or machine may not support it.'); alert('Unable to initialize WebGL. Your browser or machine may not support it.');
return; return;
} }
canvas_size[0] = canvas.width; canvas_size[1] = canvas.height;
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); const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
// Collect all the info needed to use the shader program. // Collect all the info needed to use the shader program.
// Look up which attributes our shader program is using // Look up which attributes our shader program is using
@ -29,7 +64,6 @@ function main() {
uTime: gl.getUniformLocation(shaderProgram, 'uTime'), uTime: gl.getUniformLocation(shaderProgram, 'uTime'),
}, },
}; };
// Here's where we call the routine that builds all the // Here's where we call the routine that builds all the
// objects we'll be drawing. // objects we'll be drawing.
const buffers = initBuffers(gl); const buffers = initBuffers(gl);
@ -40,9 +74,9 @@ function main() {
const deltaTime = now - then; const deltaTime = now - then;
then = now; then = now;
drawScene(gl, programInfo, buffers, deltaTime); 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 // Set the drawing position to the "identity" point, which is
// the center of the scene. // the center of the scene.
const modelViewMatrix = mat4.create(); 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 // Tell WebGL how to pull out the positions from the position
// buffer into the vertexPosition attribute // buffer into the vertexPosition attribute
{ {
@ -116,15 +138,8 @@ function drawScene(gl, programInfo, buffers, deltaTime) {
const stride = 0; const stride = 0;
const offset = 0; const offset = 0;
gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position); gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
gl.vertexAttribPointer( gl.vertexAttribPointer(programInfo.attribLocations.vertexPosition, numComponents, type, normalize, stride, offset);
programInfo.attribLocations.vertexPosition, gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);
numComponents,
type,
normalize,
stride,
offset);
gl.enableVertexAttribArray(
programInfo.attribLocations.vertexPosition);
} }
// Tell WebGL to use our program when drawing // Tell WebGL to use our program when drawing
@ -133,8 +148,7 @@ function drawScene(gl, programInfo, buffers, deltaTime) {
// Set the shader uniforms // Set the shader uniforms
gl.uniformMatrix4fv(programInfo.uniformLocations.projectionMatrix, false, projectionMatrix); gl.uniformMatrix4fv(programInfo.uniformLocations.projectionMatrix, false, projectionMatrix);
gl.uniformMatrix4fv(programInfo.uniformLocations.modelViewMatrix, false, modelViewMatrix); 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, canvas_size[0], canvas_size[1]);
gl.uniform2f(programInfo.uniformLocations.uResolution, size[0], size[1]);
gl.uniform1f(programInfo.uniformLocations.uTime, shader_time); gl.uniform1f(programInfo.uniformLocations.uTime, shader_time);
{ {
const offset = 0; const offset = 0;
@ -180,4 +194,3 @@ function loadShader(gl, type, source) {
return shader; return shader;
} }

View File

@ -4,29 +4,9 @@ title: "More Shaders"
date: 2021-06-02 date: 2021-06-02
categories: design coding categories: design coding
--- ---
<canvas id="webgl-canvas" width="1280" height="1280" style="border:1px solid white; width:100%;"> <canvas class="webgl-shader-canvas" width="720" height="720" style="border:1px solid white; width:100%;" data-fs-source="assets/circleShader.glsl" data-vs-source="assets/vertShader.glsl"></canvas>
<script type="x-shader/x-vertex" id="vertex-shader">
#version 100 <canvas class="webgl-shader-canvas" width="720" height="720" style="border:1px solid white; width:100%;" data-fs-source="assets/testShader.glsl" data-vs-source="assets/vertShader.glsl"></canvas>
precision highp float;
attribute vec4 aVertexPosition;
uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;
void main(void) {
gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
}
</script>
<script type="x-shader/x-fragment" id="fragment-shader">
#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, uTime / 10.0, 0.0);
}
</script>
</canvas>
{% asset gl-matrix-min-2.8.1.js %} {% asset gl-matrix-min-2.8.1.js %}
{% asset shaderCanvas4.js %} {% asset shaderCanvas4.js %}

View File

@ -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);
}

View File

@ -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);
}

View File

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