178 lines
5.9 KiB
HTML
178 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Pipeline Test</title>
|
|
<style>
|
|
body {
|
|
background: #222;
|
|
color: #eee;
|
|
font-family: monospace;
|
|
padding: 20px;
|
|
}
|
|
|
|
#canvas-container {
|
|
display: flex;
|
|
gap: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
canvas {
|
|
border: 1px solid #444;
|
|
}
|
|
|
|
#webgl-canvas {
|
|
width: 512px;
|
|
height: 512px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h2>Renderer Data Pipeline Prototype</h2>
|
|
<div id="output">Loading and building geometry...</div>
|
|
|
|
<div id="canvas-container">
|
|
<canvas id="webgl-canvas" width="1024" height="1024"></canvas>
|
|
<div id="atlas-container"></div>
|
|
</div>
|
|
|
|
<script type="module">
|
|
import {loadBlockstate, loadModel, TextureAtlas} from './assets.js';
|
|
import {resolveTexture, buildGeometry} from './geometry.js';
|
|
import {Renderer} from './renderer.js';
|
|
import {mat4Identity, mat4Ortho, mat4LookAt, mat4Multiply, mat4Translate} from './math.js';
|
|
import {World} from './world.js';
|
|
import {resolveBlock} from './blockstate.js';
|
|
|
|
// Helper to uniquely identify a baked model
|
|
function getVariantHash(part) {
|
|
return `${part.model}#y=${part.y || 0},x=${part.x || 0},uvlock=${!!part.uvlock}`;
|
|
}
|
|
|
|
async function testPipeline() {
|
|
try {
|
|
const atlas = new TextureAtlas(512);
|
|
document.getElementById('atlas-container').appendChild(atlas.canvas);
|
|
|
|
// 1. Manually Populate World
|
|
const world = new World();
|
|
|
|
// Draw a redstone line into a repeater, next to a cobblestone wall
|
|
world.setBlock('minecraft:redstone_wire', 0, 0, 0, {
|
|
east: 'side',
|
|
west: 'up',
|
|
north: 'none',
|
|
south: 'none',
|
|
power: '15'
|
|
});
|
|
world.setBlock('minecraft:redstone_wire', 1, 0, 0, {
|
|
east: 'side',
|
|
west: 'side',
|
|
north: 'none',
|
|
south: 'none',
|
|
power: '3'
|
|
});
|
|
world.setBlock('minecraft:repeater', 2, 0, 0, {
|
|
facing: 'east',
|
|
delay: '1',
|
|
locked: 'false',
|
|
powered: 'true'
|
|
});
|
|
world.setBlock('minecraft:cobblestone_wall', 2, 0, -1, {
|
|
up: 'true',
|
|
north: 'tall',
|
|
south: 'low'
|
|
});
|
|
|
|
// 2. Build Scene Pools
|
|
const instancePool = new Map();
|
|
|
|
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);
|
|
|
|
// Simple redstone tint calculation (if power exists)
|
|
if (block.props.power) {
|
|
const p = parseInt(block.props.power, 10);
|
|
const red = (0x4B + (p * 12)) / 255;
|
|
pool.colors.push(red, 0.0, 0.0);
|
|
} else {
|
|
pool.colors.push(1.0, 1.0, 1.0); // Default white
|
|
}
|
|
}
|
|
}
|
|
|
|
// 3. Bake Geometries & Create WebGL Buffers
|
|
const webglCanvas = document.getElementById('webgl-canvas');
|
|
const renderer = new Renderer(webglCanvas);
|
|
const renderableMeshes = [];
|
|
|
|
for (const [hash, pool] of instancePool.entries()) {
|
|
const modelJSON = await loadModel(pool.partDef.model);
|
|
|
|
// Load textures
|
|
for (const el of modelJSON.elements || []) {
|
|
for (const face of Object.values(el.faces || {})) {
|
|
const texPath = resolveTexture(modelJSON, face.texture);
|
|
if (texPath) await atlas.load(texPath);
|
|
}
|
|
}
|
|
|
|
// Bake geometry with local rotations
|
|
const geometry = buildGeometry(modelJSON, atlas, pool.partDef);
|
|
|
|
// Pack instances
|
|
const matrixArray = new Float32Array(pool.matrices);
|
|
const colorArray = new Float32Array(pool.colors);
|
|
const instanceCount = pool.matrices.length / 16;
|
|
|
|
const mesh = renderer.createInstancedMesh(geometry, instanceCount, matrixArray, colorArray);
|
|
renderableMeshes.push(mesh);
|
|
}
|
|
|
|
renderer.updateAtlas(atlas.canvas);
|
|
|
|
// 4. Render Setup
|
|
const proj = new Float32Array(16);
|
|
const view = new Float32Array(16);
|
|
const viewProj = new Float32Array(16);
|
|
|
|
mat4Ortho(proj, -3, 3, -3, 3, -20, 20);
|
|
mat4LookAt(view, 6, 5, 6, 1, 0, 0, 0, 1, 0);
|
|
mat4Multiply(viewProj, proj, view);
|
|
|
|
function render() {
|
|
const gl = renderer.gl;
|
|
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);
|
|
|
|
for (const mesh of renderableMeshes) {
|
|
renderer.drawInstanced(mesh, viewProj);
|
|
}
|
|
requestAnimationFrame(render);
|
|
}
|
|
|
|
render();
|
|
|
|
} catch (err) {
|
|
console.error(err);
|
|
}
|
|
}
|
|
|
|
testPipeline();
|
|
</script>
|
|
</body>
|
|
</html> |