diff --git a/www/js/smc/progbuilder.js b/www/js/smc/progbuilder.js index da86049..9da0bd5 100644 --- a/www/js/smc/progbuilder.js +++ b/www/js/smc/progbuilder.js @@ -23,17 +23,24 @@ class SmcProgramBuilder { precision mediump float; // uniform float uTime; - // uniform vec2 uResolution; + uniform vec2 uResolution; void main() { - // vec2 uv = gl_FragCoord.xy / uResolution; + vec2 uv = gl_FragCoord.xy / uResolution.xy; // vec3 col = 0.5 + 0.5 * cos(uTime + uv.xyx + vec3(0, 2, 4)); // gl_FragColor = vec4(col, 1.0); // gl_FragColor = vec4(216., 43., 72., 255.) / 255.; - float maxfc = max(gl_FragCoord.x, gl_FragCoord.y); - gl_FragColor = vec4(gl_FragCoord.xy, maxfc, maxfc) / maxfc; + // float maxfc = max(gl_FragCoord.x, gl_FragCoord.y); + // gl_FragColor = vec4(gl_FragCoord.xy, maxfc, maxfc) / maxfc; + + float maxuv = max(uv.x, uv.y); + gl_FragColor = vec4(216. * maxuv, 43., 72., 255.) / 255.; + + + // vec3 col = 0.5 + 0.5*cos(uv.xyx+vec3(0,2,4)); + // gl_FragColor = vec4(col, 1.); } `; diff --git a/www/js/smc/smc.js b/www/js/smc/smc.js index 2f77955..71f0c5d 100644 --- a/www/js/smc/smc.js +++ b/www/js/smc/smc.js @@ -46,6 +46,9 @@ class Smc { this.raiseError = this.raiseError.bind(this); this.render = this.render.bind(this); this.renderLoop = this.renderLoop.bind(this); + // DEBUG: is this necessary + this.setAttribute = this.setAttribute.bind(this); + this.setUniform = this.setUniform.bind(this); this.#canvas = canvas; this.#gl = Smc.#getWebGlContext(canvas); @@ -137,17 +140,16 @@ class Smc { this.#addAttribute("aVertex", this.#setVerticesAttribute.bind(this)); // DEBUG: uncomment afterwards - // this.#addUniform("uResolution", UniformType.Float2); - // this.#addUniform("uTime", UniformType.Float1); - // this.#addUniform("uDelta", UniformType.Float1); + this.#addUniform("uResolution", UniformType.Float2, false, (_) => new Float32Array([this.#gl.canvas.width, this.#gl.canvas.height])); + this.#addUniform("uTime", UniformType.Float1); + this.#addUniform("uDelta", UniformType.Float1); return this; } run() { this.#initDelegate() this.setAttribute("aVertex", this.#vertices); - // DEBUG: uncomment afterwards - // this.setUniform("uResolution", new Float32Array([this.#gl.canvas.width, this.#gl.canvas.height])); + this.setUniform("uResolution", this.#gl.canvas.width, this.#gl.canvas.height); if (this.#maxFps == 0) requestAnimationFrame(this.render) @@ -170,29 +172,10 @@ class Smc { } render(time, delta) { - // DEBUG: uncomment afterwards - // this.setUniform("uTime", time * 0.001); - // this.setUniform("uDelta", delta); - - // DEBUG: START (remove if not necessary) - this.#gl.viewport(0, 0, this.#gl.canvas.width, this.#gl.canvas.height); + this.setUniform("uTime", time * 0.001); + this.setUniform("uDelta", delta); this.#gl.clear(this.#gl.COLOR_BUFFER_BIT | this.#gl.DEPTH_BUFFER_BIT); - - this.setAttribute("aVertex", this.#vertices); - - this.#gl.useProgram(this.#program); - - // DEBUG: uncomment afterwards - // this.setUniform("uTime", time * 0.001); - // this.setUniform("uDelta", delta); - // this.setUniform("uResolution", new Float32Array([this.#gl.canvas.width, this.#gl.canvas.height])); - this.#gl.drawArrays(this.#gl.TRIANGLE_STRIP, 0, this.#vertices.length / 2); - // DEBUG: END (remove if not necessary) - - // DEBUG: uncomment afterwards - // this.#gl.clear(this.#clearBitFlags); - // this.#gl.drawArrays(this.#gl.TRIANGLE_STRIP, 0, this.#vertices.length); } #addAttribute(name, setDelegate, required = false) { @@ -228,37 +211,35 @@ class Smc { } if (type == UniformType.Float1) - var uniformfv = this.#gl.uniform1f; + var uniformfv = (...values) => this.#gl.uniform1f(location, ...values); else if (type == UniformType.Float2) - var uniformfv = this.#gl.uniform2fv; + var uniformfv = (...values) => this.#gl.uniform2f(location, ...values); else if (type == UniformType.Float3) - var uniformfv = this.#gl.uniform3fv; + var uniformfv = (...values) => this.#gl.uniform3f(location, ...values); else if (type == UniformType.Float4) - var uniformfv = this.#gl.uniform4fv; + var uniformfv = (...values) => this.#gl.uniform4f(location, ...values); else if (type == UniformType.Int1) - var uniformfv = this.#gl.uniform1i; + var uniformfv = (...values) => this.#gl.uniform1i(location, ...values); else if (type == UniformType.Int2) - var uniformfv = this.#gl.uniform2iv; + var uniformfv = (...values) => this.#gl.uniform2i(location, ...values); else if (type == UniformType.Int3) - var uniformfv = this.#gl.uniform3iv; + var uniformfv = (...values) => this.#gl.uniform3i(location, ...values); else if (type == UniformType.Int4) - var uniformfv = this.#gl.uniform4iv; + var uniformfv = (...values) => this.#gl.uniform4i(location, ...values); else { // this.raiseError isn't needed because this should // be treated as a "compilation" error not a "runtime" error throw new Error(`Expected type from enum UniformType, but got "${type}"`); } - const setDelegate = value => uniformfv(location, value); - // simplify function call to a single argument this.#uniforms.set( name, { - setDelegate: setDelegate, + setDelegate: uniformfv, location: location, setEachFrame: setEachFrame, - setCallback, + setCallback: setCallback, } ); } @@ -271,14 +252,15 @@ class Smc { return this.#uniforms.get(name).location; } - setAttribute(name, value) { + setAttribute(name, ...args) { if (this.#getAttributeLocation(name) != null) - this.#attributes.get(name).setDelegate(value); + this.#attributes.get(name).setDelegate(...args); } - setUniform(name, value) { - if (this.#getUniformLocation(name) != null) - this.#uniforms.get(name).setDelegate(value); + setUniform(name, ...args) { + if (this.#getUniformLocation(name) != null) { + this.#uniforms.get(name).setDelegate(...args); + } } #setVerticesAttribute(vertices) {