cry/site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

clean webgl-demo.js

Browse source
This commit is contained in:
Emile Clark-Boman 2026-01-31 12:33:51 +10:00
parent 9902dce1b7
commit 5c80245b53
1 changed files with 39 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

102
www/js/webgl-demo.js
View file

@ -43,73 +43,14 @@ function loadShader(gl, type, source) {
// 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;
throw new Error(`An error occurred compiling the shaders: ${gl.getShaderInfoLog(shader)}`);
}
return shader;
}
function main() {
const canvas = document.querySelector("#gl-canvas");
// Initialize the GL context
const gl = canvas.getContext("webgl");
// Only continue if WebGL is available and working
if (gl === null) {
alert(
"Unable to initialize WebGL. Your browser or machine may not support it.",
);
return;
}
// Vertex shader program
const vsSource = `
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition;
}
`;
// const fsSource = `
// // is highp wasteful for this shader?
// #ifdef GL_FRAGMENT_PRECISION_HIGH
// precision highp float;
// #else
// precision mediump float;
// #endif
// // shadertoy-like parameters
// // uniform vec2 uResolution;
// uniform float uTime;
// void main() {
// vec2 uv = gl_FragCoord.xy/vec2(300, 300).xy;
// // Time varying pixel color
// vec3 col = 0.5 + 0.5*cos(uTime+uv.xyx+vec3(0,2,4));
// // Output to screen
// gl_FragColor = vec4(col,1.0);
// // gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
// }
// `;
const fsSource = (async () => {
const res = await fetch("../shaders/segfault.glsl");
if (!res.ok) {
const error = `Failed to load fragment shader source ${url}: ${res.status}`;
alert(error);
throw new Error(error);
}
return await res.text()
})();
function renderShader(gl, vsSource, fsSource) {
const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
// Collect all the info needed to use the shader program.
@ -121,8 +62,8 @@ function main() {
vertexPosition: gl.getAttribLocation(shaderProgram, "aVertexPosition"),
},
uniformLocations: {
resolution: context.getUniformLocation(program, "uResolution"),
time: gl.getUniformLocation(shaderProgram, "uTime"),
resolution: gl.getUniformLocation(shaderProgram, "u_resolution"),
time: gl.getUniformLocation(shaderProgram, "u_time"),
},
};
@ -147,3 +88,38 @@ function main() {
requestAnimationFrame(render);
}
function fetchShader(name) {
return fetch(`../shaders/${name}`)
.then(res => {
if (!res.ok) throw new Error(`Failed to load fragment shader source ${url}: ${res.status}`);
return res.text();
});
}
function main() {
const canvas = document.querySelector("#gl-canvas");
// Initialize the GL context
const gl = canvas.getContext("webgl");
// Only continue if WebGL is available and working
if (gl === null) {
throw new Error("Unable to initialize WebGL. Your browser or machine may not support it.");
}
// Vertex shader program
const vsSource = `
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition;
}
`;
// Fetch fragment shader program
fetchShader("segfault.glsl")
.then(fsSource => {
renderShader(gl, vsSource, fsSource);
});
}