min
/
glcanvas
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: min:eee4bbfc15200be4b99d2cd6042417dc2e71de01
Branches Tags
min:main
..
compare: min:a34fb98ba57762092e992ef4f83cbfe00c9bf402
Branches Tags
min:main

No commits in common. "eee4bbfc15200be4b99d2cd6042417dc2e71de01" and "a34fb98ba57762092e992ef4f83cbfe00c9bf402" have entirely different histories.
eee4bbfc15 ... a34fb98ba5

11 changed files with 92 additions and 305 deletions
Show Stats Expand all files Collapse all files

3
fragment.glsl Normal file
View File

@ -0,0 +1,3 @@
void main() {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}

12
index.html
View File

@ -1,6 +1,5 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<link rel="stylesheet" href="/style.css" /> <link rel="stylesheet" href="/style.css" />
@ -12,10 +11,7 @@
<title>gl canvas test</title> <title>gl canvas test</title>
<script src="/js/webgl.js"></script> <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>
<script src="/js/glmatrix.js"></script>
<script src="/js/obj.js"></script>
<script src="/js/main.js" type="module" defer></script>
<script> <script>
0; 0;
@ -23,9 +19,7 @@
</head> </head>
<body> <body>
<!-- <canvas width="320" height="180"></canvas> --> <canvas></canvas>
<canvas width="640" height="360"></canvas> <script src="/main.js"></script>
<!-- <canvas width="1920" height="1080"></canvas> -->
</body> </body>
</html> </html>

28
js/glmatrix.js
View File

File diff suppressed because one or more lines are too long

122
js/main.js
View File

@ -1,122 +0,0 @@
/* Canvas set-up */
const canvas = document.getElementsByTagName("canvas")[0];
const gl = canvas.getContext("webgl", { antialias: false, preserveDrawingBuffer: false });
var projectionMatrix = mat4.create();
mat4.perspective(
projectionMatrix,
(45 * Math.PI) / 180,
gl.drawingBufferWidth / gl.drawingBufferHeight,
0.1, 100.0
);
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
/* 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(.1137, .1254, .1294, 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,
// ]);
// // 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 mdlSrc = await fetchText("/model/Shinji.obj");
const [verts, normals, indices] = parseObj(mdlSrc);
console.log(verts, normals, indices)
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 */
buffer(gl, verts, program, 'a_position', 3, gl.FLOAT);
buffer(gl, normals, program, 'a_normal', 3, gl.FLOAT);
/* Indices */
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
/* 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]
);
};
rotate3D(modelViewMatrix, 0.4, 0, 0);
/* Render */
var lastDraw = performance.now();
const draw = () => {
requestAnimationFrame(draw);
// 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 = (r2 * Math.PI) / 180;
rotate3D(modelViewMatrix, 0, r1, 0);
// Set uniforms
gl.uniformMatrix4fv(u_projectionMtx, false, projectionMatrix);
gl.uniformMatrix4fv(u_modelViewMtx, false, modelViewMatrix);
gl.uniform1f(u_clock, performance.now() % 4096);
// Draw triangles
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
}
/* Start */
requestAnimationFrame(draw);

60
js/obj.js
View File

@ -1,60 +0,0 @@
function parseObj(docStr) {
const positions = [];
const normals = [];
const indices = [];
const ops = {
v(str) {
var xyz = str.match(/[0-9.-]+/g).map(Number);
positions.push(xyz);
},
vn(str) {
var xyz = str.match(/[0-9.-]+/g).map(Number);
normals.push(xyz);
},
f(str) {
const ind = [];
for (var faceStr of str.split(" ")) {
var [iV, iVt, iVn] = faceStr.split("/").map(Number);
/* obj uses 1-based indices */
iV--; iVt--; iVn--;
ind.push({
iV: iV,
// iVt: iVt,
iVn: iVn,
});
}
/* triangulate. */
for (var i = 0; i < ind.length - 2; i++) {
indices.push(
ind[0].iV,
ind[i + 1].iV,
ind[i + 2].iV,
);
}
}
};
for (var line of docStr.split("\n")) { /* if you use crlf that sucks lol */
if (line == "" || line.startsWith("#")) {
continue;
}
var tks = line.split(" ");
var op = tks.shift();
var cont = tks.join(" ");
var opFunc = ops[op];
if (opFunc) opFunc(cont);
}
return [
new Float32Array(positions.flat()),
new Float32Array(normals.flat()),
new Uint16Array(indices),
]
}

45
js/webgl.js
View File

@ -1,45 +0,0 @@
// 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 Normal file
View File

@ -0,0 +1,59 @@
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.
}

7
shader/my.frag
View File

@ -1,7 +0,0 @@
precision mediump float;
uniform float u_clock;
void main() {
gl_FragColor = vec4(.9215, .8588, .698, 1.0);
}

11
shader/my.vert
View File

@ -1,11 +0,0 @@
precision mediump float;
attribute vec4 a_position;
uniform mat4 u_projectionMtx;
uniform mat4 u_modelViewMtx;
uniform float u_clock;
void main() {
gl_Position = u_projectionMtx * u_modelViewMtx * a_position;
}

13
style.css
View File

@ -6,16 +6,13 @@
} }
body { body {
overflow: hidden; /* overflow: hidden; */
} }
canvas { canvas {
position: absolute; position: absolute;
top: 50%; top: 0;
left: 50%; left: 0;
transform: translate(-50%, -50%); width: 100%;
min-height: 100vh; height: 100%;
min-width: 100vw;
box-sizing: border-box;
image-rendering: pixelated;
} }

7
vertex.glsl Normal file
View File

@ -0,0 +1,7 @@
attribute vec4 aVertexPosition;
uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;
void main() {
gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
}