dockered

django/frontend/static/js/3D/buffers.js

@@ -0,0 +1,69 @@
+function initBuffers(gl)
+{
+	const vertexBuffer = initVertexBuffer(gl);
+	const indexBuffer = initIndexBuffer(gl);
+	const normalBuffer = initNormalBuffer(gl);
+	return { vertex: vertexBuffer, index : indexBuffer, normal: normalBuffer };
+}
+
+function initVertexBuffer(gl)
+{
+	const positionBuffer = gl.createBuffer();
+	gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+	const positions = [
+		// Front face
+		-1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0,
+		// Back face
+		-1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0,
+		// Top face
+		-1.0, 1.0, -1.0, -1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, -1.0,
+		// Bottom face
+		-1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0,
+		// Right face
+		1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0,
+		// Left face
+		-1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0
+	];
+	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
+	return positionBuffer;
+}
+
+function initNormalBuffer(gl)
+{
+	const normalBuffer = gl.createBuffer();
+	gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);
+	const vertexNormals = [
+		// Front
+		0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0,
+		// Back
+		0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0,
+		// Top
+		0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0,
+		// Bottom
+		0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0,
+		// Right
+		1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0,
+		// Left
+		-1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0,
+	];
+	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexNormals), gl.STATIC_DRAW);
+	return normalBuffer;
+}
+
+function initIndexBuffer(gl)
+{
+	const indexBuffer = gl.createBuffer();
+	gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
+	const indices = [
+		0, 1, 2, 0, 2, 3, // front
+		4, 5, 6, 4, 6, 7, // back
+		8, 9, 10, 8, 10, 11, // top
+		12, 13, 14, 12, 14, 15, // bottom
+		16, 17, 18, 16, 18, 19, // right
+		20,  21, 22, 20, 22, 23, // left
+	];
+	gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
+	return indexBuffer;
+}
+
+export { initBuffers };

django/frontend/static/js/3D/cube.js

@@ -0,0 +1,42 @@
+import { shaderInfos } from "../3D/shaders.js"
+
+function renderCube(ctx, x, y, z, angle = 0, sx = 1, sy = 1, sz = 1)
+{
+	const modelMatrix = mat4.create();
+
+	mat4.translate(
+		modelMatrix,
+		modelMatrix,
+		[x, y, z]
+	);
+
+	mat4.rotate(
+		modelMatrix,
+		modelMatrix,
+		angle,
+		[0, 1, 0],
+	);
+
+	mat4.scale(
+		modelMatrix,
+		modelMatrix,
+		[sx, sy, sz]
+	);
+
+	mat4.translate(
+		modelMatrix,
+		modelMatrix,
+		[-1, 0, 0] // wtf, this works ?
+	);
+
+	const normalMatrix = mat4.create();
+	mat4.invert(normalMatrix, modelMatrix);
+	mat4.transpose(normalMatrix, normalMatrix);
+
+	ctx.uniformMatrix4fv(shaderInfos.uniformLocations.modelMatrix, false, modelMatrix);
+	ctx.uniformMatrix4fv(shaderInfos.uniformLocations.normalMatrix, false, normalMatrix);
+
+	ctx.drawElements(ctx.TRIANGLES, 36, ctx.UNSIGNED_SHORT, 0);
+}
+
+export { renderCube };

django/frontend/static/js/3D/shaders.js

@@ -0,0 +1,87 @@
+const vertex_shader_source = `
+	attribute vec4 aPos;
+	attribute vec3 aNormal;
+
+	uniform mat4 uMod;
+	uniform mat4 uView;
+	uniform mat4 uProj;
+	uniform mat4 uNormalMat;
+
+	varying highp vec3 vLighting;
+
+	void main()
+	{
+		gl_Position = uProj * uView * uMod * aPos;
+
+		highp vec3 ambientLight = vec3(0.3, 0.3, 0.3);
+		highp vec3 directionalLightColor = vec3(1, 1, 1);
+		highp vec3 directionalVector = vec3(-10, 2, -10);
+
+		highp vec4 transformedNormal = uNormalMat * vec4(aNormal, 1.0);
+
+		highp float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0);
+		vLighting = ambientLight + (directionalLightColor * directional);
+	}
+`;
+
+const fragment_shader_source = `
+	varying highp vec3 vLighting;
+
+	void main()
+	{
+		highp vec3 color = vec3(1.0, 1.0, 1.0);
+		gl_FragColor = vec4(color * vLighting, 1.0);
+	}
+`;
+
+export function initShaderProgram(gl)
+{
+	const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vertex_shader_source);
+	const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fragment_shader_source);
+
+	const prog = gl.createProgram();
+	gl.attachShader(prog, vertexShader);
+	gl.attachShader(prog, fragmentShader);
+	gl.linkProgram(prog);
+
+	shaderInfos = {
+		program: prog,
+		attribLocations: {
+			vertexPosition: gl.getAttribLocation(prog, "aPos"),
+			vertexNormal: gl.getAttribLocation(prog, "aNormal"),
+		},
+		uniformLocations: {
+			projectionMatrix: gl.getUniformLocation(prog, "uProj"),
+			modelMatrix: gl.getUniformLocation(prog, "uMod"),
+			viewMatrix: gl.getUniformLocation(prog, "uView"),
+			normalMatrix: gl.getUniformLocation(prog, "uNormalMat"),
+		},
+	};
+
+	if(!gl.getProgramParameter(prog, gl.LINK_STATUS))
+	{
+		alert(`Unable to initialize the shader program: ${gl.getProgramInfoLog(prog)}`);
+		return null;
+	}
+
+	return prog;
+}
+
+function loadShader(gl, type, source)
+{
+	const shader = gl.createShader(type);
+
+	gl.shaderSource(shader, source);
+	gl.compileShader(shader);
+
+	if(!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
+	{
+		alert(`An error occurred while compiling the shaders: ${gl.getShaderInfoLog(shader)}`);
+		gl.deleteShader(shader);
+		return null;
+	}
+
+	return shader;
+}
+
+export let shaderInfos;