diff --git a/www/js/webgl-demo.js b/www/js/webgl-demo.js index 9acbf13..9f46772 100644 --- a/www/js/webgl-demo.js +++ b/www/js/webgl-demo.js @@ -3,8 +3,8 @@ import { drawScene } from "./draw-scene.js"; main(); -/* XXX: TODO: Avoid using alerts! Check return values instead, - * XXX: TODO: or create/use a Result like object. +/* TODO: Avoid using alerts! Check return values instead, + * 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,41 +75,31 @@ 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; + // shadertoy-like parameters + // uniform vec2 uResolution; + uniform float uTime; + + void main() { + vec2 uv = gl_FragCoord.xy/vec2(300, 300).xy; - // 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() - })(); + // 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 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 9448d14..35b4c35 100644 --- a/www/shaders/segfault.glsl +++ b/www/shaders/segfault.glsl @@ -3,8 +3,7 @@ * But shouldn't return 0.0 or 17.0 (they're exclusive bounds). * View this shader on shadertoy: https://www.shadertoy.com/view/t3tSRj# */ - -precision highp float; +// TODO: go through all my TODO items /* ==== Text Colouring ==== */ #define PHOSPHOR_COL vec4(1, 1., 1., 1.) @@ -23,23 +22,25 @@ const float noiseSwirlStepValue = noiseSwirlValue / float(noiseSwirlSteps); const float noiseScale = 1.0; const float noiseTimeScale = 0.1; +precision highp float; + // =================================================================== // Library Functions // -float rand(vec2 co) { +inline float rand(vec2 co) { return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453); } -float quantise(float val, float n) { +inline float quantise(float val, float n) { return clamp(floor(val * n), 0.0, n) / n; } -float roundSquare(vec2 p, vec2 b, float r) { +inline float roundSquare(vec2 p, vec2 b, float r) { return length(max(abs(p)-b,0.0))-r; } // standard roundSquare -float stdRS(vec2 uv, float r) { +inline float stdRS(vec2 uv, float r) { return roundSquare(uv - 0.5, vec2(WIDTH, HEIGHT) + r, 0.05); } @@ -53,19 +54,19 @@ float stdRS(vec2 uv, float r) { // Distributed under the MIT License. See LICENSE file. // https://github.com/ashima/webgl-noise // -vec3 mod289(vec3 x) { +inline vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } -vec4 mod289(vec4 x) { +inline vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } -vec4 permute(vec4 x) { +inline vec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); } -vec4 taylorInvSqrt(vec4 r) { +inline vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; } @@ -314,7 +315,7 @@ float textLines(vec2 uvG) { return rand(uvGt)*15. + 2.; } -float fbm3(vec3 v) { +inline float fbm3(vec3 v) { float result = simplex(v); result += simplex(v * 2.) / 2.; result += simplex(v * 4.) / 4.; @@ -322,7 +323,7 @@ float fbm3(vec3 v) { return result; } -float fbm5(vec3 v) { +inline float fbm5(vec3 v) { float result = simplex(v); result += simplex(v * 2.) / 2.; result += simplex(v * 4.) / 4.; @@ -344,7 +345,7 @@ float smokeNoise(vec3 v) { // =================================================================== // Graphical Styling / Effects // -float bloom(vec2 uv2) { +inline float bloom(vec2 uv2) { // TODO c += (textureLod(iChannel0, uvC, 3.) + textureLod(iChannel0, uvC, 4.) +