diff --git a/www/js/smc/draw-scene.js.bak b/www/js/smc/draw-scene.js.bak deleted file mode 100644 index 0df76cc..0000000 --- a/www/js/smc/draw-scene.js.bak +++ /dev/null @@ -1,60 +0,0 @@ -function drawScene(gl, programInfo, buffers, time) { - // Tell WebGL how to convert from clip space to pixels - gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); - - gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear to black, fully opaque - gl.clearDepth(1.0); // Clear everything - gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); - - // NOTE: this is how width/height is taken - // const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight; - - // Tell WebGL how to pull out the positions from the position - // buffer into the vertexPosition attribute. - setPositionAttribute(gl, buffers, programInfo); - - gl.useProgram(programInfo.program); - - /* --- Set Uniform Variables --- */ - // Time since page loaded in seconds - gl.uniform1f( - programInfo.uniformLocations.time, - time, - ); - // Viewport resolution in pixels - gl.uniform2f( - programInfo.uniformLocations.resolution, - gl.canvas.width, - gl.canvas.height, - ); - - { - const offset = 0; - const vertexCount = 4; - gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount); - } -} - -// Tell WebGL how to pull out the positions from the position -// buffer into the vertexPosition attribute. -function setPositionAttribute(gl, buffers, programInfo) { - const numComponents = 2; // pull out 2 values per iteration - const type = gl.FLOAT; // the data in the buffer is 32bit floats - const normalize = false; // don't normalize - const stride = 0; // how many bytes to get from one set of values to the next - // 0 = use type and numComponents above - const offset = 0; // how many bytes inside the buffer to start from - gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position); - gl.vertexAttribPointer( - programInfo.attribLocations.vertexPosition, - numComponents, - type, - normalize, - stride, - offset, - ); - gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition); -} - -export { drawScene }; - diff --git a/www/js/smc/init-buffers.js.bak b/www/js/smc/init-buffers.js.bak deleted file mode 100644 index bf12c1a..0000000 --- a/www/js/smc/init-buffers.js.bak +++ /dev/null @@ -1,34 +0,0 @@ -function initBuffers(gl) { - const positionBuffer = initPositionBuffer(gl); - - return { - position: positionBuffer, - }; -} - -function initPositionBuffer(gl) { - // Position array of a "full-screen" quad (encoded as TRIANGLE_STRIP) - // Ref: https://en.wikipedia.org/wiki/Triangle_strip - // NOTE: +x,+y is top-right & -x,-y is bottom-left - const positions = [ - -1.0, 1.0, - -1.0, -1.0, - 1.0, 1.0, - 1.0, -1.0, - ]; - - // Create a buffer for the square's positions. - const positionBuffer = gl.createBuffer(); - // Select the positionBuffer as the one to apply buffer - // operations to from here out. - gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); - // Now pass the list of positions into WebGL to build the - // shape. We do this by creating a Float32Array from the - // JavaScript array, then use it to fill the current buffer. - gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); - - return positionBuffer; -} - -export { initBuffers }; - diff --git a/www/js/smc/lib.js.bak b/www/js/smc/lib.js.bak deleted file mode 100644 index 4f08661..0000000 --- a/www/js/smc/lib.js.bak +++ /dev/null @@ -1,112 +0,0 @@ -import { initBuffers } from "./init-buffers.js"; -import { drawScene } from "./draw-scene.js"; - -export { run }; - -// Initialize a shader program, so WebGL knows how to draw our data -function initShaderProgram(gl, vsSource, fsSource) { - const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource); - const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource); - - // Create the shader program - const program = gl.createProgram(); - gl.attachShader(program, vertexShader); - gl.attachShader(program, fragmentShader); - gl.linkProgram(program); - - // If creating the shader program failed, alert - if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { - alert( - `Unable to initialize the shader program: ${gl.getProgramInfoLog( - program, - )}`, - ); - return null; - } - - return program; -} - -function renderShader(gl, vsSource, fsSource) { - const shaderProgram = initShaderProgram(gl, vsSource, fsSource); - - // Collect all the info needed to use the shader program. - // Look up which attribute our shader program is using - // for aVertexPosition and look up uniform locations. - const programInfo = { - program: shaderProgram, - attribLocations: { - vertexPosition: gl.getAttribLocation(shaderProgram, "aVertexPosition"), - }, - uniformLocations: { - resolution: gl.getUniformLocation(shaderProgram, "u_resolution"), - time: gl.getUniformLocation(shaderProgram, "u_time"), - }, - }; - - // Here's where we call the routine that builds all the - // objects we'll be drawing. - const buffers = initBuffers(gl); - - const fpsLimit = 30; - const fpsDelta = 1000 / fpsLimit; - // let timePrev = 0; - // requestAnimationFrame asks the browser to call render, - // providing the time in milliseconds since the page loaded - function render(time) { - time *= 0.001; // convert to seconds - // delta = time - timePrev; - - drawScene(gl, programInfo, buffers, time); - - setTimeout(() => requestAnimationFrame(render), fpsDelta); - } - function update() { - requestAnimationFrame(render); - } - - // XXX: TODO: read this guide it's great! https://stackoverflow.com/questions/56998225/why-is-rendering-blurred-in-webgl - // window.addEventListener('resize', render); - - requestAnimationFrame(render); - // update(); - // setInterval(update, 1000 / fpsLimit); -} - -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 run(canvas) { - const gl = canvas.getContext("webgl"); - - // XXX: TODO: use `window.addEventListener('resize', ...);` - canvas.setAttribute('width', window.innerWidth); - canvas.setAttribute('height', window.innerHeight); - - // 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("fbm.glsl") - .then(fsSource => { - renderShader(gl, vsSource, fsSource); - }); -} - diff --git a/www/js/smc/smc.js.bak b/www/js/smc/smc.js.bak deleted file mode 100644 index a542864..0000000 --- a/www/js/smc/smc.js.bak +++ /dev/null @@ -1,37 +0,0 @@ -import { SmcErr } from "./errors.js"; -import { SmcBuilder } from "./builder.js"; - -export { SmcErr }; - -// XXX: TODO: merge SmcBuilder into smc -class smc { - #canvas; - #builderDelegate = _ => { }; - - constructor(canvas) { - this.#canvas = canvas; - } - - build(delegate) { - this.#builderDelegate = delegate; - return this; - } - - onError(delegate) { - this.#errorDelegate = delegate; - return this; - } - - run() { - this.#canvas = canvas; - const gl = this.#canvas.getContext("webgl"); - if (gl == null) { - this.#raiseError( - SmcErr.UNSUPPORTED, - Error("Unable to initialize WebGL. Your browser or machine may not support it."), - ); - } - const builder = this.#builderDelegate(new SmcBuilder(gl, this.#raiseError)) - builder.render() - } -}