remove useless color buffer and prepare texture buffer implementation

src/client/buffers.ts

@@ -26,45 +26,6 @@ export function initBuffers(
 		new Float32Array(normals),
 		gl.STATIC_DRAW);
 
-	const myColors = [
-		[1.0, 1.0, 1.0, 1.0],
-		[1.0, 0.0, 0.0, 1.0],
-		[0.0, 1.0, 0.0, 1.0],
-		[0.0, 0.0, 1.0, 1.0],
-		[1.0, 1.0, 0.0, 1.0],
-		[1.0, 0.0, 1.0, 1.0],
-		[0.0, 0.0, 0.0, 1.0],
-		[0.0, 1.0, 1.0, 1.0],
-	];
-
-	let faceColors: any = [];
-
-	for (let i = 0; i < 70; i++) {
-		faceColors = faceColors.concat(myColors);
-	}
-	// Convert the array of colors into a table for all the vertices.
-
-	const colors: any = [];
-
-	for (let j = 0; j < indices.length; ++j) {
-		const c = [
-			myColors[Math.floor(Math.random() * 8)],
-			faceColors[Math.floor(Math.random() * 8)],
-			faceColors[Math.floor(Math.random() * 8)],
-			faceColors[Math.floor(Math.random() * 8)],
-		];
-		// Repeat each color four times for the four vertices of the face
-		// colors = colors.concat([1.0, 1.0, 1.0, 1.0]);
-		colors.push(c[0][0]);
-		colors.push(c[0][1]);
-		colors.push(c[0][2]);
-		colors.push(c[0][3]);
-	}
-
-	const colorBuffer = gl.createBuffer();
-	gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
-	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
-
 	const indexBuffer = gl.createBuffer();
 	gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
 	gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
@@ -73,7 +34,6 @@ export function initBuffers(
 
 	return {
 		position: positionBuffer,
-		color: colorBuffer,
 		indices: indexBuffer,
 		normals: normalBuffer,
 	};

src/client/main.ts

@@ -30,14 +30,12 @@ async function main() {
 
 	const vsSource = `
 		attribute vec4 aVertexPosition;
-		attribute vec4 aVertexColor;
 		attribute vec4 aVertexNormal;
 
 		uniform mat4 uProjectionMatrix;
 		uniform mat4 uviewMatrix;
 		uniform mat4 umodelMatrix;
 
-		varying highp vec4 vColor;
 		varying highp vec4 vNormal;
 		varying highp vec3 vPosition;
 		void main()
@@ -47,7 +45,6 @@ async function main() {
 				umodelMatrix *
 				aVertexPosition;
 			vPosition = vec3(aVertexPosition);
-			vColor = aVertexColor;
 			vNormal = umodelMatrix * aVertexNormal;
 		}
 	`;
@@ -55,7 +52,6 @@ async function main() {
 	const fsSource = `
 	precision highp float;
 
-	varying highp vec4 vColor;
 	varying highp vec4 vNormal;
 	varying highp vec3 vPosition;
 
@@ -91,7 +87,6 @@ async function main() {
 	const fsSource2 = `
 	precision highp float;
 
-	varying highp vec4 vColor;
 	varying highp vec4 vNormal;
 	varying highp vec3 vPosition;
 
@@ -126,7 +121,6 @@ async function main() {
 	const fsSource3 = `
 	precision highp float;
 
-	varying highp vec4 vColor;
 	varying highp vec4 vNormal;
 	varying highp vec3 vPosition;
 
@@ -193,8 +187,6 @@ async function main() {
 		attribLocations: {
 			vertexPosition: gl.getAttribLocation(shaderProgram,
 				'aVertexPosition'),
-			vertexColor: gl.getAttribLocation(shaderProgram,
-				'aVertexColor'),
 			vertexNormal: gl.getAttribLocation(shaderProgram,
 				'aVertexNormal'),
 		},
@@ -283,15 +275,15 @@ async function main() {
 			circleSize = $('#input2').val();
 			circleSize = parseFloat(circleSize);
 		});
-		$('#sphere').on('click', async function() {
+		$('#o_sphere').on('click', async function() {
 			const data = await getObj('/static/objs/sphere.obj');
 			updateObj(data);
 		});
-		$('#teapot').on('click', async function() {
+		$('#o_teapot').on('click', async function() {
 			const data = await getObj('/static/objs/teapot.obj');
 			updateObj(data);
 		});
-		$('#fox').on('click', async function() {
+		$('#o_fox').on('click', async function() {
 			const data = await getObj('/static/objs/fox.obj');
 			updateObj(data);
 		});
@@ -413,26 +405,6 @@ function drawScene(gl: any,
 			programInfo.attribLocations.vertexNormal);
 	}
 
-	// Tell WebGL how to pull out the positions from the position
-	// buffer into the vertexPosition attribute.
-	{
-		const numComponents = 4;
-		const type = gl.FLOAT;
-		const normalize = false;
-		const stride = 0;
-		const offset = 0;
-		gl.bindBuffer(gl.ARRAY_BUFFER, buffers.color);
-		gl.vertexAttribPointer(
-			programInfo.attribLocations.vertexColor,
-			numComponents,
-			type,
-			normalize,
-			stride,
-			offset);
-		gl.enableVertexAttribArray(
-			programInfo.attribLocations.vertexColor);
-	}
-
 	// Tell WebGL which indices to use to index the vertices
 	gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers.indices);
 

src/client/texture.ts

@@ -0,0 +1,54 @@
+/**
+ * Initialize a texture and load an image.
+ * @param {any} gl the gl context
+ * @param {string} url the url of the texture
+ */
+export function loadTexture(gl: any, url: any) {
+	const texture = gl.createTexture();
+	gl.bindTexture(gl.TEXTURE_2D, texture);
+
+	// Because images have to be downloaded over the internet
+	// they might take a moment until they are ready.
+	// Until then put a single pixel in the texture so we can
+	// use it immediately. When the image has finished downloading
+	// we'll update the texture with the contents of the image.
+	const level = 0;
+	const internalFormat = gl.RGBA;
+	const width = 1;
+	const height = 1;
+	const border = 0;
+	const srcFormat = gl.RGBA;
+	const srcType = gl.UNSIGNED_BYTE;
+	const pixel = new Uint8Array([0, 0, 255, 255]);  // opaque blue
+	gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
+		width, height, border, srcFormat, srcType,
+		pixel);
+
+	const image = new Image();
+	image.onload = function() {
+		gl.bindTexture(gl.TEXTURE_2D, texture);
+		gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
+		srcFormat, srcType, image);
+
+		// WebGL1 has different requirements for power of 2 images
+		// vs non power of 2 images so check if the image is a
+		// power of 2 in both dimensions.
+		if (isPowerOf2(image.width) && isPowerOf2(image.height)) {
+			// Yes, it's a power of 2. Generate mips.
+			gl.generateMipmap(gl.TEXTURE_2D);
+		} else {
+			// No, it's not a power of 2. Turn off mips and set
+			// wrapping to clamp to edge
+			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+		}
+	};
+	image.src = url;
+
+	return texture;
+}
+
+function isPowerOf2(value: number) {
+return (value & (value - 1)) == 0;
+}

views/index.ejs

@@ -18,6 +18,7 @@
 					<button id='button1'>Change Shader to black and white</button>
 					<button id='button2'>Change Shader to colored</button>
 					<button id='button3'>Change Shader to flat</button>
+					<button id='button3'>Change Shader to texture</button>
 				</div>
 				<div class='ui-block'>
 					<input id='input1' value='50'></input>
@@ -29,9 +30,15 @@
 					<button id='changecirclesize'>Change circle size</button>
 				</div>
 				<div class='ui-block'>
-					<button id='sphere'>Set obj to sphere</button>
+					<button id='o_sphere'>Set object to sphere</button>
-					<button id='teapot'>Set obj to teapot</button>
+					<button id='o_teapot'>Set object to teapot</button>
-					<button id='fox'>Set obj to fox</button>
+					<button id='o_fox'>Set object to fox</button>
+				</div>
+				<div class='ui-block'>
+					<button id='t_grey'>Set texture to white</button>
+					<button id='t_wall'>Set texture to wall</button>
+					<button id='t_fox'>Set texture to fox</button>
+					<button id='t_ice'>Set texture to ice</button>
 				</div>
 			</div>
 		</div>