remove *.bak
This commit is contained in:
parent
3f28498ad4
commit
618a3aec23
4 changed files with 0 additions and 243 deletions
|
|
@ -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 };
|
|
||||||
|
|
||||||
|
|
@ -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 };
|
|
||||||
|
|
||||||
|
|
@ -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);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -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()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue