some stuff

src/script.js

@@ -7,6 +7,15 @@ let program;
 let cubeVertices;
 let cubeVertexBuffer;
 
+let lineCubeVertices;
+let lineCubeVertexBuffer;
+
+let originVertices;
+let originVertexBuffer;
+
+let floorVertices;
+let floorVertexBuffer;
+
 let lastFrame = Date.now();
 
 async function init() {
@@ -72,37 +81,66 @@ async function init() {
 	     1, -1, -1, 0.5, 1, 1
 	];
 
+	lineCubeVertices = [
+		 1,  1,  1, 1, 0, 0,
+		 1,  1, -1, 1, 0, 0,
+		 1,  1,  1, 1, 0, 0,
+		 1, -1,  1, 1, 0, 0,
+		 1,  1,  1, 1, 0, 0,
+		-1,  1,  1, 1, 0, 0,
+		 1,  1, -1, 1, 0, 0,
+		 1, -1, -1, 1, 0, 0,
+		 1,  1, -1, 1, 0, 0,
+		-1,  1, -1, 1, 0, 0,
+		 1, -1,  1, 1, 0, 0,
+		 1, -1, -1, 1, 0, 0,
+		 1, -1,  1, 1, 0, 0,
+		-1, -1,  1, 1, 0, 0,
+		-1,  1,  1, 1, 0, 0,
+		-1,  1, -1, 1, 0, 0,
+		-1,  1,  1, 1, 0, 0,
+		-1, -1,  1, 1, 0, 0,
+		 1, -1, -1, 1, 0, 0,
+		-1, -1, -1, 1, 0, 0,
+		-1, -1,  1, 1, 0, 0,
+		-1, -1, -1, 1, 0, 0,
+		-1,  1, -1, 1, 0, 0,
+		-1, -1, -1, 1, 0, 0,
+	];
 
+	originVertices = [
+		0, 0, 0, 1, 0, 0,
+		1, 0, 0, 1, 0, 0,
+		0, 0, 0, 0, 1, 0,
+		0, 1, 0, 0, 1, 0,
+		0, 0, 0, 0, 0, 1,
+		0, 0, 1, 0, 0, 1,
+	];
+
+	floorVertices = [
+		 1, 0,  1, 0, 0, 0,
+		-1, 0, -1, 0, 0, 0,
+		-1, 0,  1, 0, 0, 0,
+		-1, 0, -1, 0, 0, 0,
+		 1, 0,  1, 0, 0, 0,
+		 1, 0, -1, 0, 0, 0,
+	];
 
 	cubeVertexBuffer = gl.createBuffer();
 	gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexBuffer);
 	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(cubeVertices), gl.STATIC_DRAW);
 
-	// get location of vertPosition attribute
+	lineCubeVertexBuffer = gl.createBuffer();
-	let positionAttribLocation = gl.getAttribLocation(program, "vertPosition");
+	gl.bindBuffer(gl.ARRAY_BUFFER, lineCubeVertexBuffer);
-	let colorAttribLocation = gl.getAttribLocation(program, "vertColor");
+	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(lineCubeVertices), gl.STATIC_DRAW);
 
-	gl.vertexAttribPointer(
+	originVertexBuffer = gl.createBuffer();
-		positionAttribLocation, // which attribute is read
+	gl.bindBuffer(gl.ARRAY_BUFFER, originVertexBuffer);
-		3, // number of values to read
+	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(originVertices), gl.STATIC_DRAW);
-		gl.FLOAT, // type of values
-		gl.FALSE, // whether to normalize
-		6 * Float32Array.BYTES_PER_ELEMENT, // size of individual vertex / distance between values to read
-		0 // offset where to start reading
-	);
-	// enable attribute
-	gl.enableVertexAttribArray(positionAttribLocation);
 
-	gl.vertexAttribPointer(
+	floorVertexBuffer = gl.createBuffer();
-		colorAttribLocation, // which attribute is read
+	gl.bindBuffer(gl.ARRAY_BUFFER, floorVertexBuffer);
-		3, // number of values to read
+	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(floorVertices), gl.STATIC_DRAW);
-		gl.FLOAT, // type of values
-		gl.FALSE, // whether to normalize
-		6 * Float32Array.BYTES_PER_ELEMENT, // size of individual vertex / distance between values to read
-		3 * Float32Array.BYTES_PER_ELEMENT // offset where to start reading
-	);
-
-	gl.enableVertexAttribArray(colorAttribLocation);
 
 	// unbind buffer
 	gl.bindBuffer(gl.ARRAY_BUFFER, null);
@@ -116,6 +154,17 @@ async function init() {
 	requestAnimationFrame(draw);
 }
 
+function setAttribPointers() {
+	let positionAttribLocation = gl.getAttribLocation(program, "vertPosition");
+	let colorAttribLocation = gl.getAttribLocation(program, "vertColor");
+
+	gl.vertexAttribPointer(positionAttribLocation, 3, gl.FLOAT, gl.FALSE, 6 * Float32Array.BYTES_PER_ELEMENT, 0);
+	gl.vertexAttribPointer(colorAttribLocation, 3, gl.FLOAT, gl.FALSE, 6 * Float32Array.BYTES_PER_ELEMENT, 3 * Float32Array.BYTES_PER_ELEMENT);
+
+	gl.enableVertexAttribArray(positionAttribLocation);
+	gl.enableVertexAttribArray(colorAttribLocation);
+}
+
 let frameCount = 0;
 let lastStatUpdate = Date.now();
 
@@ -156,11 +205,11 @@ async function draw() {
 	let modelViewLocation = gl.getUniformLocation(program, "modelViewMatrix");
 	let projectionLocation = gl.getUniformLocation(program, "projectionMatrix");
 
-	let modelMatrix = [];
-	mat4Identity(modelMatrix);
 
-	mat4RotateX(modelMatrix, modelMatrix, hue * 2 * Math.PI);
+	let projectionMatrix = [];
-	mat4RotateY(modelMatrix, modelMatrix, hue * 2 * Math.PI);
+	mat4BuildPerspective(projectionMatrix, 90.0 / 180.0 * Math.PI, cv.width / cv.height, 0.1, 20);
+	gl.uniformMatrix4fv(projectionLocation, gl.FALSE, new Float32Array(projectionMatrix));
+
 
 	let viewMatrix = [];
 	let cameraPosition = [2, 2, 2];
@@ -168,20 +217,35 @@ async function draw() {
 	let cameraUp = [0, 1, 0];
 	mat4BuildLookAt(viewMatrix, cameraPosition, cameraLookAt, cameraUp);
 
+
+	let modelMatrix = [];
+	mat4Identity(modelMatrix);
+
+	mat4RotateX(modelMatrix, modelMatrix, hue * 2 * Math.PI);
+	mat4RotateY(modelMatrix, modelMatrix, hue * 2 * Math.PI);
+
+
 	let modelViewMatrix = [];
 	mat4Multiply(modelViewMatrix, viewMatrix, modelMatrix);
 
 	gl.uniformMatrix4fv(modelViewLocation, gl.FALSE, new Float32Array(modelViewMatrix));
 
-	let projectionMatrix = [];
-	mat4BuildPerspective(projectionMatrix, 90.0 / 180.0 * Math.PI, cv.width / cv.height, 0.1, 20);
-
-	gl.uniformMatrix4fv(projectionLocation, gl.FALSE, new Float32Array(projectionMatrix));
-
 	gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexBuffer);
-
+	setAttribPointers();
 	gl.drawArrays(gl.TRIANGLES, 0, cubeVertices.length / 6);
 
+	gl.lineWidth(3);
+	gl.bindBuffer(gl.ARRAY_BUFFER, lineCubeVertexBuffer);
+	setAttribPointers();
+	gl.drawArrays(gl.LINES, 0, lineCubeVertices.length / 6);
+
+
+	gl.uniformMatrix4fv(modelViewLocation, gl.FALSE, new Float32Array(viewMatrix));
+	
+	gl.bindBuffer(gl.ARRAY_BUFFER, originVertexBuffer);
+	setAttribPointers();
+	gl.drawArrays(gl.LINES, 0, originVertices.length / 6);
+
 	lastFrame = now;
 	requestAnimationFrame(draw);
 }