diff --git a/www/js/webgl-demo.js b/www/js/webgl-demo.js index 9f46772..9acbf13 100644 --- a/www/js/webgl-demo.js +++ b/www/js/webgl-demo.js @@ -3,8 +3,8 @@ import { drawScene } from "./draw-scene.js"; main(); -/* TODO: Avoid using alerts! Check return values instead, - * TODO: or create/use a Result like object. +/* XXX: TODO: Avoid using alerts! Check return values instead, + * XXX: TODO: or create/use a Result like object. */ // Initialize a shader program, so WebGL knows how to draw our data @@ -37,7 +37,7 @@ function loadShader(gl, type, source) { // Send the source to the shader object gl.shaderSource(shader, source); - + // Compile the shader program gl.compileShader(shader); @@ -75,31 +75,41 @@ function main() { } `; - const fsSource = ` - // is highp wasteful for this shader? - #ifdef GL_FRAGMENT_PRECISION_HIGH - precision highp float; - #else - precision mediump float; - #endif + // 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; + // // shadertoy-like parameters + // // uniform vec2 uResolution; + // uniform float uTime; - // Time varying pixel color - vec3 col = 0.5 + 0.5*cos(uTime+uv.xyx+vec3(0,2,4)); + // 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() + })(); - // Output to screen - gl_FragColor = vec4(col,1.0); - - // gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); - } - `; - const shaderProgram = initShaderProgram(gl, vsSource, fsSource); // Collect all the info needed to use the shader program. diff --git a/www/shaders/segfault.glsl b/www/shaders/segfault.glsl index 35b4c35..9448d14 100644 --- a/www/shaders/segfault.glsl +++ b/www/shaders/segfault.glsl @@ -3,7 +3,8 @@ * But shouldn't return 0.0 or 17.0 (they're exclusive bounds). * View this shader on shadertoy: https://www.shadertoy.com/view/t3tSRj# */ -// TODO: go through all my TODO items + +precision highp float; /* ==== Text Colouring ==== */ #define PHOSPHOR_COL vec4(1, 1., 1., 1.) @@ -22,25 +23,23 @@ const float noiseSwirlStepValue = noiseSwirlValue / float(noiseSwirlSteps); const float noiseScale = 1.0; const float noiseTimeScale = 0.1; -precision highp float; - // =================================================================== // Library Functions // -inline float rand(vec2 co) { +float rand(vec2 co) { return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453); } -inline float quantise(float val, float n) { +float quantise(float val, float n) { return clamp(floor(val * n), 0.0, n) / n; } -inline float roundSquare(vec2 p, vec2 b, float r) { +float roundSquare(vec2 p, vec2 b, float r) { return length(max(abs(p)-b,0.0))-r; } // standard roundSquare -inline float stdRS(vec2 uv, float r) { +float stdRS(vec2 uv, float r) { return roundSquare(uv - 0.5, vec2(WIDTH, HEIGHT) + r, 0.05); } @@ -54,19 +53,19 @@ inline float stdRS(vec2 uv, float r) { // Distributed under the MIT License. See LICENSE file. // https://github.com/ashima/webgl-noise // -inline vec3 mod289(vec3 x) { +vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } -inline vec4 mod289(vec4 x) { +vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } -inline vec4 permute(vec4 x) { +vec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); } -inline vec4 taylorInvSqrt(vec4 r) { +vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; } @@ -315,7 +314,7 @@ float textLines(vec2 uvG) { return rand(uvGt)*15. + 2.; } -inline float fbm3(vec3 v) { +float fbm3(vec3 v) { float result = simplex(v); result += simplex(v * 2.) / 2.; result += simplex(v * 4.) / 4.; @@ -323,7 +322,7 @@ inline float fbm3(vec3 v) { return result; } -inline float fbm5(vec3 v) { +float fbm5(vec3 v) { float result = simplex(v); result += simplex(v * 2.) / 2.; result += simplex(v * 4.) / 4.; @@ -345,7 +344,7 @@ float smokeNoise(vec3 v) { // =================================================================== // Graphical Styling / Effects // -inline float bloom(vec2 uv2) { +float bloom(vec2 uv2) { // TODO c += (textureLod(iChannel0, uvC, 3.) + textureLod(iChannel0, uvC, 4.) +