basic mechanics
This commit is contained in:
commit
2c842d5b0f
4 changed files with 216 additions and 0 deletions
53
docs/index.html
Normal file
53
docs/index.html
Normal file
|
@ -0,0 +1,53 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>WebGL Demo</title>
|
||||||
|
<script id="vertex-shader-2d" type="notjs">
|
||||||
|
|
||||||
|
// an attribute will receive data from a buffer
|
||||||
|
attribute vec4 a_position;
|
||||||
|
varying vec4 b_position;
|
||||||
|
uniform mat4 mat_thing;
|
||||||
|
|
||||||
|
// all shaders have a main function
|
||||||
|
void main() {
|
||||||
|
|
||||||
|
// gl_Position is a special variable a vertex shader
|
||||||
|
// is responsible for setting
|
||||||
|
gl_Position = a_position * mat_thing;
|
||||||
|
b_position = a_position;
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<script id="fragment-shader-2d" type="notjs">
|
||||||
|
|
||||||
|
// fragment shaders don't have a default precision so we need
|
||||||
|
// to pick one. mediump is a good default
|
||||||
|
precision mediump float;
|
||||||
|
varying vec4 b_position;
|
||||||
|
uniform float size_thing;
|
||||||
|
uniform float dist_thing;
|
||||||
|
|
||||||
|
void main() {
|
||||||
|
// gl_FragColor is a special variable a fragment shader
|
||||||
|
// is responsible for setting
|
||||||
|
float dist = (log(distance(b_position.xy,vec2(0.0))) - size_thing) / log(2.0) * 0.1;
|
||||||
|
gl_FragColor = vec4((mod(dist,0.1) - 0.1 + 0.1 * dist_thing) * 50.0 * vec3(1,1,1),1); // return redish-purple
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<script src="/js/twgl.min.js" type="module"></script>
|
||||||
|
<script src="/js/index.js" type="module"></script>
|
||||||
|
<link rel="stylesheet" href="main.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<canvas id="c" width="640" height="480"></canvas>
|
||||||
|
<div class='hud'>
|
||||||
|
hud
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
136
docs/js/index.js
Normal file
136
docs/js/index.js
Normal file
|
@ -0,0 +1,136 @@
|
||||||
|
'use strict';
|
||||||
|
var nothingness = 1, nGain = 0.01; //todo: outsource into another file
|
||||||
|
|
||||||
|
var canvas, gl, positionAttributeLocation, positionBuffer, matBuffer, sizeBuffer, distBuffer
|
||||||
|
|
||||||
|
function createShader(gl, type, source) {
|
||||||
|
var shader = gl.createShader(type);
|
||||||
|
gl.shaderSource(shader, source);
|
||||||
|
gl.compileShader(shader);
|
||||||
|
var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
|
||||||
|
if (success) {
|
||||||
|
return shader;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(gl.getShaderInfoLog(shader));
|
||||||
|
gl.deleteShader(shader);
|
||||||
|
}
|
||||||
|
|
||||||
|
function createProgram(gl, vertexShader, fragmentShader) {
|
||||||
|
var program = gl.createProgram();
|
||||||
|
gl.attachShader(program, vertexShader);
|
||||||
|
gl.attachShader(program, fragmentShader);
|
||||||
|
gl.linkProgram(program);
|
||||||
|
var success = gl.getProgramParameter(program, gl.LINK_STATUS);
|
||||||
|
if (success) {
|
||||||
|
return program;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(gl.getProgramInfoLog(program));
|
||||||
|
gl.deleteProgram(program);
|
||||||
|
}
|
||||||
|
|
||||||
|
function main() {
|
||||||
|
// Get A WebGL context
|
||||||
|
canvas = document.querySelector("#c");
|
||||||
|
gl = canvas.getContext("webgl");
|
||||||
|
if (!gl) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var vertexShaderSource = document.querySelector("#vertex-shader-2d").text;
|
||||||
|
var fragmentShaderSource = document.querySelector("#fragment-shader-2d").text;
|
||||||
|
|
||||||
|
var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
|
||||||
|
var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
|
||||||
|
|
||||||
|
var program = createProgram(gl, vertexShader, fragmentShader);
|
||||||
|
|
||||||
|
positionAttributeLocation = gl.getAttribLocation(program, "a_position");
|
||||||
|
matBuffer = gl.getUniformLocation(program, "mat_thing");
|
||||||
|
sizeBuffer = gl.getUniformLocation(program, "size_thing");
|
||||||
|
distBuffer = gl.getUniformLocation(program, "dist_thing");
|
||||||
|
|
||||||
|
positionBuffer = gl.createBuffer();
|
||||||
|
|
||||||
|
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
|
||||||
|
|
||||||
|
gl.useProgram(program);
|
||||||
|
|
||||||
|
// Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER)
|
||||||
|
var size = 2; // 2 components per iteration
|
||||||
|
var type = gl.FLOAT; // the data is 32bit floats
|
||||||
|
var normalize = false; // don't normalize the data
|
||||||
|
var stride = 0; // 0 = move forward size * sizeof(type) each iteration to get the next position
|
||||||
|
var offset = 0; // start at the beginning of the buffer
|
||||||
|
gl.vertexAttribPointer(
|
||||||
|
positionAttributeLocation, size, type, normalize, stride, offset);
|
||||||
|
|
||||||
|
// draw
|
||||||
|
renderThing();
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderThing() {
|
||||||
|
twgl.resizeCanvasToDisplaySize(gl.canvas);
|
||||||
|
|
||||||
|
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
|
||||||
|
|
||||||
|
gl.clearColor(0, 0, 0, 0);
|
||||||
|
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
||||||
|
|
||||||
|
var ratio = gl.canvas.width / gl.canvas.height;
|
||||||
|
var ratioA = Math.max(ratio, 1);
|
||||||
|
var ratioB = ratioA / ratio;
|
||||||
|
|
||||||
|
var positions = [
|
||||||
|
-1, -1,
|
||||||
|
-1, 1,
|
||||||
|
1, 1,
|
||||||
|
-1, -1,
|
||||||
|
1, -1,
|
||||||
|
1, 1
|
||||||
|
];
|
||||||
|
gl.enableVertexAttribArray(positionAttributeLocation);
|
||||||
|
|
||||||
|
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
|
||||||
|
|
||||||
|
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
|
||||||
|
|
||||||
|
gl.uniformMatrix4fv(matBuffer, false, new Float32Array([
|
||||||
|
ratioB, 0, 0, 0,
|
||||||
|
0, ratioA, 0, 0,
|
||||||
|
0, 0, 1, 0,
|
||||||
|
0, 0, 0, 1
|
||||||
|
]));
|
||||||
|
|
||||||
|
hud.textContent = `${Math.floor(nothingness * 100) / 100} nothings; ${Math.floor(nGain * 60 * 100) / 100} nil/sec`
|
||||||
|
|
||||||
|
gl.uniform1f(sizeBuffer, -Math.log(nothingness));
|
||||||
|
gl.uniform1f(distBuffer, 0.1 + nGain / (nothingness+10));
|
||||||
|
|
||||||
|
var primitiveType = gl.TRIANGLES;
|
||||||
|
var offset = 0;
|
||||||
|
var count = 6;
|
||||||
|
gl.drawArrays(primitiveType, offset, count);
|
||||||
|
requestAnimationFrame(renderThing)
|
||||||
|
}
|
||||||
|
let hud = document.querySelector('.hud');
|
||||||
|
|
||||||
|
main();
|
||||||
|
requestAnimationFrame(renderThing)
|
||||||
|
|
||||||
|
let clicking = false;
|
||||||
|
|
||||||
|
document.body.onclick = async function() {
|
||||||
|
if (clicking) return;
|
||||||
|
clicking = true;
|
||||||
|
let oldNGain = nGain;
|
||||||
|
nGain += 0.05;
|
||||||
|
while (nGain > oldNGain) {
|
||||||
|
nGain -= 0.005;
|
||||||
|
nothingness += nGain;
|
||||||
|
await new Promise((res) => setTimeout(res,1000 / 60))
|
||||||
|
}
|
||||||
|
nGain = oldNGain;
|
||||||
|
clicking = false;
|
||||||
|
}
|
6
docs/js/twgl.min.js
vendored
Normal file
6
docs/js/twgl.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
21
docs/main.css
Normal file
21
docs/main.css
Normal file
|
@ -0,0 +1,21 @@
|
||||||
|
canvas {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
body, html {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.hud {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background: rgba(255, 255, 255, 0.7);
|
||||||
|
color: rgb(0, 0, 0);
|
||||||
|
font-family: monospace;
|
||||||
|
padding: 10px;
|
||||||
|
min-width: 200px;
|
||||||
|
min-height: 50px;
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
Loading…
Reference in a new issue