Upgraded buffermodel.ts to automatically choose the best shader for the vertex data's needs, depending on what attributes it's using.

src/client/scripts/esm/game/input.js

@@ -10,7 +10,7 @@ import selection from './chess/selection.js';
 import camera from './rendering/camera.js';
 import board from './rendering/board.js';
 import arrows from './rendering/arrows.js';
-import buffermodel from './rendering/buffermodel.js';
+import { createModel } from './rendering/buffermodel.js';
 import jsutil from '../util/jsutil.js';
 import space from './misc/space.js';
 import frametracker from './rendering/frametracker.js';
@@ -654,9 +654,8 @@ function renderMouse() {
 	const mouseOuterWidthWorld = space.convertPixelsToWorldSpace_Virtual(mouseOuterWidth);
 
 	const mouseData = bufferdata.getDataRingSolid(x, y, mouseInnerWidthWorld, mouseOuterWidthWorld, 32, [0,0,0,mouseOpacity]);
-	const data32 = new Float32Array(mouseData);
 
-	const model = buffermodel.createModel_Colored(data32, 2, "TRIANGLES");
+	const model = createModel(mouseData, 2, "TRIANGLES", true);
 
 	model.render();
 }

src/client/scripts/esm/game/rendering/animation.js

@@ -7,7 +7,7 @@ import options from './options.js';
 import board from './board.js';
 import math from '../../util/math.js';
 import perspective from './perspective.js';
-import buffermodel from './buffermodel.js';
+import { createModel } from './buffermodel.js';
 import frametracker from './frametracker.js';
 import spritesheet from './spritesheet.js';
 // Import End
@@ -157,8 +157,7 @@ function genTransparentModel() {
 		data.push(...getDataOfSquare3D(thisAnimation.endCoords, color));
 	}
 
-	// return buffermodel.createModel_Color3D(new Float32Array(data))
-	return buffermodel.createModel_Colored(new Float32Array(data), 3, "TRIANGLES");
+	return createModel(data, 3, "TRIANGLES", true);
 }
 
 // This can be merged with the functions within buferdata module
@@ -242,8 +241,7 @@ function genPieceModel() {
 		appendDataOfPiece3D(data, thisAnimation.type, newCoords);
 	}
 
-	// return buffermodel.createModel_ColorTexture3D(new Float32Array(data))
-	return buffermodel.createModel_ColorTextured(new Float32Array(data), 3, "TRIANGLES", spritesheet.getSpritesheet());
+	return createModel(data, 3, "TRIANGLES", true, spritesheet.getSpritesheet());
 }
 
 function appendDataOfPiece3D(data, type, coords) {

src/client/scripts/esm/game/rendering/arrows.js

@@ -17,7 +17,7 @@ import camera from './camera.js';
 import board from './board.js';
 import math from '../../util/math.js';
 import moveutil from '../../chess/util/moveutil.js';
-import buffermodel from './buffermodel.js';
+import { createModel } from './buffermodel.js';
 import colorutil from '../../chess/util/colorutil.js';
 import jsutil from '../../util/jsutil.js';
 import coordutil from '../../chess/util/coordutil.js';
@@ -264,8 +264,8 @@ function update() {
 		onPieceIndicatorHover(pieceHovered.type, pieceHovered.coords, pieceHovered.dir); // Generate their legal moves and highlight model
 	}
 
-	model = buffermodel.createModel_ColorTextured(new Float32Array(data), 2, "TRIANGLES", spritesheet.getSpritesheet());
-	modelArrows = buffermodel.createModel_Colored(new Float32Array(dataArrows), 2, "TRIANGLES");
+	model = createModel(data, 2, "TRIANGLES", true, spritesheet.getSpritesheet());
+	modelArrows = createModel(dataArrows, 2, "TRIANGLES", true);
 }
 
 /**
@@ -445,7 +445,7 @@ function onPieceIndicatorHover(type, pieceCoords, direction) {
 	const usingDots = preferences.getLegalMovesShape() === 'dots';
 	highlights.concatData_HighlightedMoves_Individual(data, thisPieceLegalMoves, color, usingDots, gamefile);
 	highlights.concatData_HighlightedMoves_Sliding(data, pieceCoords, thisPieceLegalMoves, color, usingDots, gamefile);
-	const model = buffermodel.createModel_Colored(new Float32Array(data), 2, "TRIANGLES");
+	const model = createModel(data, 2, "TRIANGLES", true);
 
 	// Store both these objects inside piecesHoveredOver
 
@@ -522,7 +522,7 @@ function regenModelsOfHoveredPieces() {
 		const data = [];
 		highlights.concatData_HighlightedMoves_Sliding(data, coords, value.legalMoves, value.color, usingDots, gamefile);
 		// Overwrite the model inside piecesHoveredOver
-		value.model = buffermodel.createModel_Colored(new Float32Array(data), 2, "TRIANGLES");
+		value.model = createModel(data, 2, "TRIANGLES", true);
 	}
 }
 

src/client/scripts/esm/game/rendering/board.js

@@ -10,7 +10,7 @@ import movement from './movement.js';
 import options from './options.js';
 import camera from './camera.js';
 import math from '../../util/math.js';
-import buffermodel from './buffermodel.js';
+import { createModel } from './buffermodel.js';
 import game from '../chess/game.js';
 import jsutil from '../../util/jsutil.js';
 import space from '../misc/space.js';
@@ -273,7 +273,7 @@ function regenBoardModel() {
 	const z = perspective.getEnabled() ? perspectiveMode_z : 0;
 
 	const data = bufferdata.getDataQuad_ColorTexture3D(startX, startY, endX, endY, z, texCoordStartX, texCoordStartY, texCoordEndX, texCoordEndY, 1, 1, 1, 1);
-	return buffermodel.createModel_ColorTextured(new Float32Array(data), 3, "TRIANGLES", boardTexture);
+	return createModel(data, 3, "TRIANGLES", true, boardTexture);
 }
 
 function renderMainBoard() {
@@ -430,7 +430,7 @@ function renderSolidCover() {
 	const boundingBox = { left: -dist, right: dist, bottom: -dist, top: dist };
 	data.push(...bufferdata.getDataQuad_Color3D(boundingBox, z, [r, g, b, a])); // Floor of the box
 
-	const model = buffermodel.createModel_Colored(new Float32Array(data), 3, "TRIANGLES");
+	const model = createModel(data, 3, "TRIANGLES", true);
 
 	model.render();
 }
@@ -465,7 +465,7 @@ function renderZoomedBoard(zoom, opacity) {
 	const z = perspective.getEnabled() ? perspectiveMode_z : 0;
 
 	const data = bufferdata.getDataQuad_ColorTexture3D(startX, startY, endX, endY, z, texleft, texbottom, texright, textop, 1, 1, 1, opacity);
-	const model = buffermodel.createModel_ColorTextured(new Float32Array(data), 3, "TRIANGLES", boardTexture);
+	const model = createModel(data, 3, "TRIANGLES", true, boardTexture);
 
 	model.render();
 }

src/client/scripts/esm/game/rendering/bufferdata.js

@@ -3,11 +3,6 @@
 import spritesheet from './spritesheet.js';
 // Import End
 
-/**
- * Type Definitions
- * @typedef {import('./buffermodel.js').BufferModel} BufferModel
- * @typedef {import('./highlights.js').BoundingBox} BoundingBox
- */
 
 "use strict";
 

src/client/scripts/esm/game/rendering/buffermodel.js

@@ -70,7 +70,7 @@ function createModel_Textured(data, numPositionComponents, mode, texture) {
  */
 function createModel_ColorTextured(data, numPositionComponents, mode, texture) {
 	if (numPositionComponents < 2 || numPositionComponents > 3) return console.error(`Unsupported numPositionComponents ${numPositionComponents}`);
-	if (texture == null) return console.error("Cannot create a textured buffer model without a texture!");
+	if (!texture) return console.error("Cannot create a textured buffer model without a texture!");
 	const stride = numPositionComponents + 6;
 	const prepDrawFunc = getPrepDrawFunc(shaders.programs.coloredTextureProgram, numPositionComponents, true, true);
 	return new BufferModel(shaders.programs.coloredTextureProgram, data, stride, mode, texture, prepDrawFunc);
@@ -152,6 +152,10 @@ function initAttribute(attribLocation, stride_bytes, numComponents, offset) { //
 	gl.vertexAttribPointer(attribLocation, numComponents, type, normalize, stride_bytes, offset);
 	// Enables the attribute for use
 	gl.enableVertexAttribArray(attribLocation);
+	// Reset divisor to 0 for non-instanced rendering.
+	// If another shader set the same attribute index to be
+	// used for instanced rendering, it would otherwise never be reset!
+	gl.vertexAttribDivisor(attribLocation, 0); // 0 = attrib updated once per vertex   1 = updated once per instance
 }
 
 /**
@@ -172,7 +176,7 @@ function renderPreppedModel(program, position = [0,0,0], scale = [1,1,1], vertex
 	mat4.translate(worldMatrix, worldMatrix, position);
 
 	// Update the world matrix on our shader program, translating our models into the correct position.
-	gl.uniformMatrix4fv(program.uniformLocations.worldMatrix, gl.FALSE, worldMatrix);
+	gl.uniformMatrix4fv(program.uniformLocations.worldMatrix, false, worldMatrix);
 
 	// Send any custom-provided uniform values over to the gpu now!
 	for (const key in customUniformValues) { sendCustomUniformToGPU(program, key, customUniformValues[key]); }
@@ -198,7 +202,7 @@ function renderPreppedModel(program, position = [0,0,0], scale = [1,1,1], vertex
  * Sends a custom-specified uniform to the gpu before rendering.
  * ASSUMES the provided program has been set already with gl.useProgram()!
  * @param {ShaderProgram} program - The shader program
- * @param {string} name - The name of the uniform, for example, `uVertexColor`.
+ * @param {string} name - The name of the uniform, for example, `tintColor`.
  * @param {number[] | Float32Array | number} value - The value of the uniform, for example, `[1,0,0,1]`.
  */
 function sendCustomUniformToGPU(program, name, value) {
@@ -363,7 +367,7 @@ function BufferModel(program, data, stride, mode, texture, prepDrawFunc) { // da
      * Applies any custom uniform values before rendering.
      * @param {number[]} position - The positional translation
      * @param {number[]} scale - The scaling transformation
-     * @param {Object} [customUniformValues] - If applicable, an object containing any custom uniform values. For example, `{ uVertexColor: [1,0,0,1] }` - This particular uniform is used for the tintedTextureProgram.
+     * @param {Object} [customUniformValues] - If applicable, an object containing any custom uniform values. For example, `{ tintColor: [1,0,0,1] }` - This particular uniform is used for the tintedTextureProgram.
      */
 	this.render = function(position, scale, customUniformValues) { // [0,0,0], [1,1,1]  Can be undefined, render will use defaults.
 		// Must be called before every time we render the model.