drawing cube
This commit is contained in:
parent
a34fb98ba5
commit
52f489c5b2
GPG Key ID:
FEECFF24EF0CE9E9
|
|
@ -1,3 +0,0 @@
|
||||||
void main() {
|
|
||||||
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
|
|
||||||
}
|
|
||||||
35
index.html
35
index.html
|
|
@ -1,25 +1,28 @@
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
|
||||||
<link rel="stylesheet" href="/style.css" />
|
|
||||||
|
|
||||||
<meta charset="UTF-8" />
|
<head>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<link rel="stylesheet" href="/style.css" />
|
||||||
|
|
||||||
<meta name="darkreader-lock" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="color-scheme" content="only light" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
|
||||||
<title>gl canvas test</title>
|
<meta name="darkreader-lock" />
|
||||||
|
<meta name="color-scheme" content="only light" />
|
||||||
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js" integrity="sha512-zhHQR0/H5SEBL3Wn6yYSaTTZej12z0hVZKOv3TwCUXT1z5qeqGcXJLLrbERYRScEDDpYIJhPC1fk31gqR783iQ==" crossorigin="anonymous" defer></script>
|
<title>gl canvas test</title>
|
||||||
|
|
||||||
<script>
|
<script src="/js/webgl.js"></script>
|
||||||
0;
|
<script src="/js/glmatrix.js"></script>
|
||||||
</script>
|
<script src="/js/main.js" type="module" defer></script>
|
||||||
</head>
|
|
||||||
|
<script>
|
||||||
|
0;
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<canvas></canvas>
|
||||||
|
</body>
|
||||||
|
|
||||||
<body>
|
|
||||||
<canvas></canvas>
|
|
||||||
<script src="/main.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,161 @@
|
||||||
|
/* Canvas set-up */
|
||||||
|
const canvas = document.getElementsByTagName("canvas")[0];
|
||||||
|
const gl = canvas.getContext("webgl", { antialias: false, preserveDrawingBuffer: false });
|
||||||
|
|
||||||
|
var projectionMatrix = mat4.create();
|
||||||
|
const resizeCanvas = () => {
|
||||||
|
var width = gl.canvas.clientWidth;
|
||||||
|
var height = gl.canvas.clientHeight;
|
||||||
|
|
||||||
|
if (gl.canvas.width != width || gl.canvas.height != height) {
|
||||||
|
gl.canvas.width = width;
|
||||||
|
gl.canvas.height = height;
|
||||||
|
|
||||||
|
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
|
||||||
|
|
||||||
|
mat4.perspective(
|
||||||
|
projectionMatrix,
|
||||||
|
(45 * Math.PI) / 180,
|
||||||
|
gl.canvas.clientWidth / gl.canvas.clientHeight,
|
||||||
|
0.1, 100.0
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
resizeCanvas();
|
||||||
|
|
||||||
|
/* Load shaders */
|
||||||
|
const fetchText = async url => (await fetch(url)).text();
|
||||||
|
const vsSrc = await fetchText("/shader/my.vert");
|
||||||
|
const fsSrc = await fetchText("/shader/my.frag");
|
||||||
|
|
||||||
|
const program = compile(gl, vsSrc, fsSrc);
|
||||||
|
gl.useProgram(program);
|
||||||
|
|
||||||
|
/* WebGL set-up */
|
||||||
|
gl.clearColor(0.0, 0.0, 0.0, 1.0);
|
||||||
|
gl.enable(gl.DEPTH_TEST);
|
||||||
|
|
||||||
|
/* Geometry */
|
||||||
|
var verts = new Float32Array([
|
||||||
|
1.0, 1.0, 1.0,
|
||||||
|
-1.0, 1.0, 1.0,
|
||||||
|
-1.0, -1.0, 1.0,
|
||||||
|
1.0, -1.0, 1.0,
|
||||||
|
1.0, -1.0, -1.0,
|
||||||
|
1.0, 1.0, -1.0,
|
||||||
|
-1.0, 1.0, -1.0,
|
||||||
|
-1.0, -1.0, -1.0,
|
||||||
|
]);
|
||||||
|
|
||||||
|
// var makeVerts = (szX, szZ) => {
|
||||||
|
// var fverts = new Float32Array([]);
|
||||||
|
// var findices = new Uint16Array([]);
|
||||||
|
// for (var x = 0; x <= szX; x += 1) {
|
||||||
|
// for (var z = 0; z <= szZ; z += 1) {
|
||||||
|
// var cverts = new Float32Array([
|
||||||
|
// 1.0, 1.0, 1.0,
|
||||||
|
// -1.0, 1.0, 1.0,
|
||||||
|
// -1.0, 0.0, 1.0,
|
||||||
|
// 1.0, 0.0, 1.0,
|
||||||
|
// 1.0, 0.0, -1.0,
|
||||||
|
// 1.0, 1.0, -1.0,
|
||||||
|
// -1.0, 1.0, -1.0,
|
||||||
|
// -1.0, 0.0, -1.0,
|
||||||
|
// ]);
|
||||||
|
|
||||||
|
// var cindices = new Uint8Array([
|
||||||
|
// 0, 1, 2, 0, 2, 3, // front
|
||||||
|
// 0, 3, 4, 0, 4, 5, // right
|
||||||
|
// 0, 5, 6, 0, 6, 1, // up
|
||||||
|
// 1, 6, 7, 1, 7, 2, // left
|
||||||
|
// 7, 4, 3, 7, 3, 2, // down
|
||||||
|
// 4, 7, 6, 4, 6, 5 // back
|
||||||
|
// ]).map;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// };
|
||||||
|
|
||||||
|
// var myVerts = makeVerts(5, 5);
|
||||||
|
|
||||||
|
// Indices of the vertices for each triangle
|
||||||
|
var indices = new Uint8Array([
|
||||||
|
0, 1, 2, 0, 2, 3, // front
|
||||||
|
0, 3, 4, 0, 4, 5, // right
|
||||||
|
0, 5, 6, 0, 6, 1, // up
|
||||||
|
1, 6, 7, 1, 7, 2, // left
|
||||||
|
7, 4, 3, 7, 3, 2, // down
|
||||||
|
4, 7, 6, 4, 6, 5 // back
|
||||||
|
]);
|
||||||
|
|
||||||
|
const modelViewMatrix = mat4.create();
|
||||||
|
mat4.translate(
|
||||||
|
modelViewMatrix,
|
||||||
|
modelViewMatrix,
|
||||||
|
[0.0, 0.0, -5.0]
|
||||||
|
);
|
||||||
|
|
||||||
|
/* Get attribs/uniforms */
|
||||||
|
var a_position = gl.getAttribLocation(program, 'a_position');
|
||||||
|
var u_projectionMtx = gl.getUniformLocation(program, 'u_projectionMtx');
|
||||||
|
var u_modelViewMtx = gl.getUniformLocation(program, 'u_modelViewMtx');
|
||||||
|
var u_clock = gl.getUniformLocation(program, 'u_clock');
|
||||||
|
|
||||||
|
/* Create buffers */
|
||||||
|
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
|
||||||
|
gl.bufferData(gl.ARRAY_BUFFER, verts, gl.STATIC_DRAW);
|
||||||
|
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer());
|
||||||
|
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
|
||||||
|
|
||||||
|
gl.vertexAttribPointer(a_position, 3, gl.FLOAT, false, verts.BYTES_PER_ELEMENT * 3, 0);
|
||||||
|
gl.enableVertexAttribArray(a_position);
|
||||||
|
|
||||||
|
/* Utility function */
|
||||||
|
const rotate3D = (mtx, x, y, z) => {
|
||||||
|
mat4.rotate(
|
||||||
|
mtx, mtx,
|
||||||
|
x,
|
||||||
|
[1, 0, 0]
|
||||||
|
);
|
||||||
|
mat4.rotate(
|
||||||
|
mtx, mtx,
|
||||||
|
y,
|
||||||
|
[0, 1, 0]
|
||||||
|
);
|
||||||
|
mat4.rotate(
|
||||||
|
mtx, mtx,
|
||||||
|
z,
|
||||||
|
[0, 0, 1]
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
/* Render */
|
||||||
|
var lastDraw = performance.now();
|
||||||
|
const draw = () => {
|
||||||
|
requestAnimationFrame(draw);
|
||||||
|
|
||||||
|
// Resize if needed
|
||||||
|
resizeCanvas(gl);
|
||||||
|
|
||||||
|
// Rotate camera
|
||||||
|
var delta = performance.now() - lastDraw + 0.001;
|
||||||
|
lastDraw = performance.now();
|
||||||
|
|
||||||
|
var r1 = 1 / delta;
|
||||||
|
var r2 = r1 * 2;
|
||||||
|
r1 = (r1 * Math.PI) / 180;
|
||||||
|
r2 = (r1 * Math.PI) / 180;
|
||||||
|
// rotate3D(modelViewMatrix, r1, r2, r1);
|
||||||
|
|
||||||
|
// Set uniforms
|
||||||
|
gl.uniformMatrix4fv(u_projectionMtx, false, projectionMatrix);
|
||||||
|
gl.uniformMatrix4fv(u_modelViewMtx, false, modelViewMatrix);
|
||||||
|
gl.uniform1f(u_clock, performance.now() % 16384);
|
||||||
|
|
||||||
|
// Draw triangles
|
||||||
|
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
||||||
|
gl.drawElements(gl.LINE_LOOP, indices.length, gl.UNSIGNED_BYTE, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Start */
|
||||||
|
requestAnimationFrame(draw);
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
// Compile a WebGL program from a vertex shader and a fragment shader
|
||||||
|
compile = (gl, vshader, fshader) => {
|
||||||
|
var vs = gl.createShader(gl.VERTEX_SHADER);
|
||||||
|
gl.shaderSource(vs, vshader);
|
||||||
|
gl.compileShader(vs);
|
||||||
|
var fs = gl.createShader(gl.FRAGMENT_SHADER);
|
||||||
|
gl.shaderSource(fs, fshader);
|
||||||
|
gl.compileShader(fs);
|
||||||
|
var program = gl.createProgram();
|
||||||
|
gl.attachShader(program, vs);
|
||||||
|
gl.attachShader(program, fs);
|
||||||
|
gl.linkProgram(program);
|
||||||
|
gl.useProgram(program);
|
||||||
|
console.log('vertex shader:', gl.getShaderInfoLog(vs) || 'OK');
|
||||||
|
console.log('fragment shader:', gl.getShaderInfoLog(fs) || 'OK');
|
||||||
|
console.log('program:', gl.getProgramInfoLog(program) || 'OK');
|
||||||
|
return program;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Bind a data buffer to an attribute, fill it with data and enable it
|
||||||
|
buffer = (gl, data, program, attribute, size, type) => {
|
||||||
|
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
|
||||||
|
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
|
||||||
|
var a = gl.getAttribLocation(program, attribute);
|
||||||
|
gl.vertexAttribPointer(a, size, type, false, 0, 0);
|
||||||
|
gl.enableVertexAttribArray(a);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Draw a box
|
||||||
|
drawBox = (gl, n, viewProjMatrix, u_MvpMatrix, u_NormalMatrix) => {
|
||||||
|
|
||||||
|
// Compute mvp matrix
|
||||||
|
g_mvpMatrix.set(viewProjMatrix);
|
||||||
|
g_mvpMatrix.multiply(g_modelMatrix);
|
||||||
|
gl.uniformMatrix4fv(u_MvpMatrix, false, g_mvpMatrix.elements);
|
||||||
|
|
||||||
|
// Compute inverse transform
|
||||||
|
g_normalMatrix.setInverseOf(g_modelMatrix);
|
||||||
|
g_normalMatrix.transpose();
|
||||||
|
gl.uniformMatrix4fv(u_NormalMatrix, false, g_normalMatrix.elements);
|
||||||
|
|
||||||
|
// Draw
|
||||||
|
gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
|
||||||
|
}
|
||||||
|
|
||||||
59
main.js
59
main.js
|
|
@ -1,59 +0,0 @@
|
||||||
const canvas = document.getElementsByTagName("canvas")[0];
|
|
||||||
const gl = canvas.getContext("webgl");
|
|
||||||
|
|
||||||
function render() {
|
|
||||||
gl.clearColor(0.0, 0.0, 0.0, 1.0);
|
|
||||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
||||||
|
|
||||||
requestAnimationFrame(render);
|
|
||||||
}
|
|
||||||
|
|
||||||
function makeShader(type, source) {
|
|
||||||
const shader = gl.createShader(type);
|
|
||||||
gl.shaderSource(shader, source);
|
|
||||||
gl.compileShader(shader);
|
|
||||||
|
|
||||||
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
||||||
console.log("shader compile failed:\n" + gl.getShaderInfoLog(shader));
|
|
||||||
|
|
||||||
gl.deleteShader(shader);
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return shader;
|
|
||||||
}
|
|
||||||
|
|
||||||
function makeShaderProgram(vertexSource, fragmentSource) {
|
|
||||||
const vertexShader = makeShader(gl.VERTEX_SHADER, vertexSource);
|
|
||||||
const fragmentShader = makeShader(gl.FRAGMENT_SHADER, fragmentSource);
|
|
||||||
|
|
||||||
const shaderProgram = gl.createProgram();
|
|
||||||
gl.attachShader(shaderProgram, vertexShader);
|
|
||||||
gl.attachShader(shaderProgram, fragmentShader);
|
|
||||||
gl.linkProgram(shaderProgram);
|
|
||||||
|
|
||||||
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
|
|
||||||
console.log("program link failed:\n" + gl.getProgramInfoLog(shaderProgram));
|
|
||||||
gl.deleteProgram(shaderProgram);
|
|
||||||
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return shaderProgram;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function startWebGl() {
|
|
||||||
const vertexShader = await fetch("/vertex.glsl", (r) => r.text());
|
|
||||||
const fragmentShader = await fetch("/fragment.glsl", (r) => r.text());
|
|
||||||
|
|
||||||
const program = makeShaderProgram(vertexShader, fragmentShader);
|
|
||||||
|
|
||||||
requestAnimationFrame(render);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (gl) {
|
|
||||||
await startWebGl();
|
|
||||||
} else {
|
|
||||||
console.log("no webgl");
|
|
||||||
// and use a static background probably.
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
precision mediump float;
|
||||||
|
|
||||||
|
uniform float u_clock;
|
||||||
|
|
||||||
|
vec3 hsv2rgb(vec3 c) {
|
||||||
|
vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
|
||||||
|
vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
|
||||||
|
return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
void main() {
|
||||||
|
float color = mod(u_clock, 4096.0) / 4096.0;
|
||||||
|
gl_FragColor = vec4(hsv2rgb(vec3(color, 0.8, 1.0)), 1.0);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
precision mediump float;
|
||||||
|
|
||||||
|
attribute vec4 a_position;
|
||||||
|
uniform mat4 u_projectionMtx;
|
||||||
|
uniform mat4 u_modelViewMtx;
|
||||||
|
|
||||||
|
uniform float u_clock;
|
||||||
|
|
||||||
|
void main() {
|
||||||
|
float v = u_clock / 4096.0;
|
||||||
|
|
||||||
|
gl_Position = u_projectionMtx * u_modelViewMtx * a_position * vec4(1.0, mix(1.0, v, step(0.0, a_position.y)), 1.0, 1.0);
|
||||||
|
}
|
||||||
13
style.css
13
style.css
|
|
@ -6,13 +6,16 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
/* overflow: hidden; */
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
canvas {
|
canvas {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 50%;
|
||||||
left: 0;
|
left: 50%;
|
||||||
width: 100%;
|
transform: translate(-50%, -50%);
|
||||||
height: 100%;
|
width: 100vw;
|
||||||
|
height: auto;
|
||||||
|
aspect-ratio: 16/9;
|
||||||
|
image-rendering: pixelated;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
attribute vec4 aVertexPosition;
|
|
||||||
uniform mat4 uModelViewMatrix;
|
|
||||||
uniform mat4 uProjectionMatrix;
|
|
||||||
|
|
||||||
void main() {
|
|
||||||
gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue