actually useful
This commit is contained in:
99
renderer.js
99
renderer.js
@@ -1,4 +1,7 @@
|
||||
import {mat4Identity, mat4Multiply, mat4Ortho, mat4LookAt} from './math.js';
|
||||
import {mat4Identity, mat4Multiply, mat4Ortho, mat4LookAt, mat4Translate} from './math.js';
|
||||
import {loadBlockstate, loadModel, TextureAtlas} from './assets.js';
|
||||
import {resolveTexture, buildGeometry} from './geometry.js';
|
||||
import {resolveBlock, getVariantHash} from './blockstate.js';
|
||||
|
||||
const VS_SRC = `#version 300 es
|
||||
layout(location=0) in vec3 a_position;
|
||||
@@ -65,18 +68,14 @@ export class Renderer {
|
||||
|
||||
const gl = this.gl;
|
||||
gl.enable(gl.DEPTH_TEST);
|
||||
gl.enable(gl.CULL_FACE); // Minecraft culls inside faces
|
||||
gl.enable(gl.CULL_FACE);
|
||||
|
||||
// Compile Program
|
||||
const vs = compileShader(gl, gl.VERTEX_SHADER, VS_SRC);
|
||||
const fs = compileShader(gl, gl.FRAGMENT_SHADER, FS_SRC);
|
||||
this.program = gl.createProgram();
|
||||
gl.attachShader(this.program, vs);
|
||||
gl.attachShader(this.program, fs);
|
||||
gl.linkProgram(this.program);
|
||||
if (!gl.getProgramParameter(this.program, gl.LINK_STATUS)) {
|
||||
throw new Error(gl.getProgramInfoLog(this.program));
|
||||
}
|
||||
|
||||
this.uniforms = {
|
||||
viewProj: gl.getUniformLocation(this.program, "u_viewProj"),
|
||||
@@ -85,12 +84,81 @@ export class Renderer {
|
||||
};
|
||||
|
||||
this.atlasTexture = gl.createTexture();
|
||||
this.atlas = new TextureAtlas(512);
|
||||
this.meshes = []; // Array of renderable VAO objects
|
||||
|
||||
// Default Camera Setup
|
||||
this.projMatrix = new Float32Array(16);
|
||||
this.viewMatrix = new Float32Array(16);
|
||||
this.viewProjMatrix = new Float32Array(16);
|
||||
this.setCamera(-4, 4, -4, 4, 8, 6, 8, 1, 0, 1);
|
||||
}
|
||||
|
||||
updateAtlas(canvasAtlas) {
|
||||
setCamera(left, right, bottom, top, eyeX, eyeY, eyeZ, targetX, targetY, targetZ) {
|
||||
mat4Ortho(this.projMatrix, left, right, bottom, top, -20, 20);
|
||||
mat4LookAt(this.viewMatrix, eyeX, eyeY, eyeZ, targetX, targetY, targetZ, 0, 1, 0);
|
||||
mat4Multiply(this.viewProjMatrix, this.projMatrix, this.viewMatrix);
|
||||
}
|
||||
|
||||
// This method takes a World object and rebuilds the WebGL buffers
|
||||
async updateWorld(world) {
|
||||
const instancePool = new Map();
|
||||
|
||||
// 1. Resolve all blocks in the world into part definitions
|
||||
for (const block of world.blocks.values()) {
|
||||
const stateJSON = await loadBlockstate(block.id);
|
||||
const parts = resolveBlock(stateJSON, block.props);
|
||||
|
||||
for (const part of parts) {
|
||||
const hash = getVariantHash(part);
|
||||
if (!instancePool.has(hash)) {
|
||||
instancePool.set(hash, {partDef: part, matrices: [], colors: []});
|
||||
}
|
||||
|
||||
const matrix = mat4Identity(new Float32Array(16));
|
||||
mat4Translate(matrix, matrix, [block.x, block.y, block.z]);
|
||||
|
||||
const pool = instancePool.get(hash);
|
||||
pool.matrices.push(...matrix);
|
||||
|
||||
if (block.props.power) {
|
||||
const p = parseInt(block.props.power, 10);
|
||||
pool.colors.push((0x4B + (p * 12)) / 255, 0.0, 0.0);
|
||||
} else {
|
||||
pool.colors.push(1.0, 1.0, 1.0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 2. Build geometries, load textures, and create WebGL buffers
|
||||
const newMeshes = [];
|
||||
for (const [hash, pool] of instancePool.entries()) {
|
||||
const modelJSON = await loadModel(pool.partDef.model);
|
||||
|
||||
for (const el of modelJSON.elements || []) {
|
||||
for (const face of Object.values(el.faces || {})) {
|
||||
const texPath = resolveTexture(modelJSON, face.texture);
|
||||
if (texPath) await this.atlas.load(texPath);
|
||||
}
|
||||
}
|
||||
|
||||
const geometry = buildGeometry(modelJSON, this.atlas, pool.partDef);
|
||||
const matrixArray = new Float32Array(pool.matrices);
|
||||
const colorArray = new Float32Array(pool.colors);
|
||||
const instanceCount = pool.matrices.length / 16;
|
||||
|
||||
newMeshes.push(this.createInstancedMesh(geometry, instanceCount, matrixArray, colorArray));
|
||||
}
|
||||
|
||||
// 3. Upload updated atlas and swap the active meshes
|
||||
this.updateAtlasTexture();
|
||||
this.meshes = newMeshes;
|
||||
}
|
||||
|
||||
updateAtlasTexture() {
|
||||
const gl = this.gl;
|
||||
gl.bindTexture(gl.TEXTURE_2D, this.atlasTexture);
|
||||
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvasAtlas);
|
||||
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.atlas.canvas);
|
||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
|
||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
|
||||
}
|
||||
@@ -145,18 +213,23 @@ export class Renderer {
|
||||
return {vao, indexCount: geometry.indices.length, instanceCount};
|
||||
}
|
||||
|
||||
drawInstanced(mesh, viewProjMatrix) {
|
||||
render() {
|
||||
const gl = this.gl;
|
||||
gl.useProgram(this.program);
|
||||
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
|
||||
gl.clearColor(0.1, 0.1, 0.12, 1.0);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
||||
|
||||
gl.uniformMatrix4fv(this.uniforms.viewProj, false, viewProjMatrix);
|
||||
gl.useProgram(this.program);
|
||||
gl.uniformMatrix4fv(this.uniforms.viewProj, false, this.viewProjMatrix);
|
||||
gl.uniform3f(this.uniforms.lightDir, 1.0, 2.0, 0.5);
|
||||
|
||||
gl.activeTexture(gl.TEXTURE0);
|
||||
gl.bindTexture(gl.TEXTURE_2D, this.atlasTexture);
|
||||
gl.uniform1i(this.uniforms.texture, 0);
|
||||
|
||||
gl.bindVertexArray(mesh.vao);
|
||||
gl.drawElementsInstanced(gl.TRIANGLES, mesh.indexCount, gl.UNSIGNED_SHORT, 0, mesh.instanceCount);
|
||||
for (const mesh of this.meshes) {
|
||||
gl.bindVertexArray(mesh.vao);
|
||||
gl.drawElementsInstanced(gl.TRIANGLES, mesh.indexCount, gl.UNSIGNED_SHORT, 0, mesh.instanceCount);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user