Compare commits

..

3 commits

2 changed files with 48 additions and 39 deletions

View file

@ -3,8 +3,8 @@ import { drawScene } from "./draw-scene.js";
main(); main();
/* TODO: Avoid using alerts! Check return values instead, /* XXX: TODO: Avoid using alerts! Check return values instead,
* TODO: or create/use a Result like object. * XXX: TODO: or create/use a Result like object.
*/ */
// Initialize a shader program, so WebGL knows how to draw our data // 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 // Send the source to the shader object
gl.shaderSource(shader, source); gl.shaderSource(shader, source);
// Compile the shader program // Compile the shader program
gl.compileShader(shader); gl.compileShader(shader);
@ -75,31 +75,41 @@ function main() {
} }
`; `;
const fsSource = ` // const fsSource = `
// is highp wasteful for this shader? // // is highp wasteful for this shader?
#ifdef GL_FRAGMENT_PRECISION_HIGH // #ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float; // precision highp float;
#else // #else
precision mediump float; // precision mediump float;
#endif // #endif
// shadertoy-like parameters // // shadertoy-like parameters
// uniform vec2 uResolution; // // uniform vec2 uResolution;
uniform float uTime; // uniform float uTime;
void main() {
vec2 uv = gl_FragCoord.xy/vec2(300, 300).xy;
// Time varying pixel color // void main() {
vec3 col = 0.5 + 0.5*cos(uTime+uv.xyx+vec3(0,2,4)); // 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); 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.

View file

@ -3,7 +3,8 @@
* But shouldn't return 0.0 or 17.0 (they're exclusive bounds). * But shouldn't return 0.0 or 17.0 (they're exclusive bounds).
* View this shader on shadertoy: https://www.shadertoy.com/view/t3tSRj# * View this shader on shadertoy: https://www.shadertoy.com/view/t3tSRj#
*/ */
// TODO: go through all my TODO items
precision highp float;
/* ==== Text Colouring ==== */ /* ==== Text Colouring ==== */
#define PHOSPHOR_COL vec4(1, 1., 1., 1.) #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 noiseScale = 1.0;
const float noiseTimeScale = 0.1; const float noiseTimeScale = 0.1;
precision highp float;
// =================================================================== // ===================================================================
// Library Functions // Library Functions
// //
inline float rand(vec2 co) { float rand(vec2 co) {
return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453); 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; 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; return length(max(abs(p)-b,0.0))-r;
} }
// standard roundSquare // 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); 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. // Distributed under the MIT License. See LICENSE file.
// https://github.com/ashima/webgl-noise // 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; 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; 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); return mod289(((x*34.0)+1.0)*x);
} }
inline vec4 taylorInvSqrt(vec4 r) { vec4 taylorInvSqrt(vec4 r) {
return 1.79284291400159 - 0.85373472095314 * r; return 1.79284291400159 - 0.85373472095314 * r;
} }
@ -315,7 +314,7 @@ float textLines(vec2 uvG) {
return rand(uvGt)*15. + 2.; return rand(uvGt)*15. + 2.;
} }
inline float fbm3(vec3 v) { float fbm3(vec3 v) {
float result = simplex(v); float result = simplex(v);
result += simplex(v * 2.) / 2.; result += simplex(v * 2.) / 2.;
result += simplex(v * 4.) / 4.; result += simplex(v * 4.) / 4.;
@ -323,7 +322,7 @@ inline float fbm3(vec3 v) {
return result; return result;
} }
inline float fbm5(vec3 v) { float fbm5(vec3 v) {
float result = simplex(v); float result = simplex(v);
result += simplex(v * 2.) / 2.; result += simplex(v * 2.) / 2.;
result += simplex(v * 4.) / 4.; result += simplex(v * 4.) / 4.;
@ -345,7 +344,7 @@ float smokeNoise(vec3 v) {
// =================================================================== // ===================================================================
// Graphical Styling / Effects // Graphical Styling / Effects
// //
inline float bloom(vec2 uv2) { float bloom(vec2 uv2) {
// TODO // TODO
c += (textureLod(iChannel0, uvC, 3.) + c += (textureLod(iChannel0, uvC, 3.) +
textureLod(iChannel0, uvC, 4.) + textureLod(iChannel0, uvC, 4.) +