fix render glitches

This commit is contained in:
LabyStudio
2022-01-31 21:18:20 +01:00
parent af525c88fa
commit c63bf36bca
8 changed files with 66 additions and 30 deletions
@@ -48,7 +48,6 @@ window.Player = class {
resetPos() {
this.setPos(0, 2, 0);
this.pitch = -90;
}
setPos(x, y, z) {
@@ -9,11 +9,27 @@ window.BlockRenderer = class {
renderBlock(world, group, typeId, x, y, z) {
let boundingBox = new BoundingBox(0.0, 0.0, 0.0, 1.0, 1.0, 1.0);
for (let face = 0; face < 6; face++) {
this.renderFace(world, typeId, boundingBox, face, x, y, z);
let values = EnumBlockFace.values();
for (let i = 0; i < values.length; i++) {
let face = values[i];
if (this.shouldRenderFace(world, x, y, z, face)) {
// Start drawing
this.tessellator.startDrawing();
// Render face
this.renderFace(world, typeId, boundingBox, face, x, y, z);
// Draw
this.tessellator.draw(group);
}
}
}
shouldRenderFace(world, x, y, z, face) {
let typeId = world.getBlockAt(x + face.x, y + face.y, z + face.z);
return typeId === 0; /*|| Block.getById(typeId).isTransparent();*/
}
renderFace(world, typeId, boundingBox, face, x, y, z) {
// Vertex mappings
let minX = x + boundingBox.minX;
@@ -34,37 +50,37 @@ window.BlockRenderer = class {
minV = 1 - minV;
maxV = 1 - maxV;
if (face === 0) {
if (face === EnumBlockFace.BOTTOM) {
this.addBlockCorner(world, face, minX, minY, maxZ, minU, maxV);
this.addBlockCorner(world, face, minX, minY, minZ, minU, minV);
this.addBlockCorner(world, face, maxX, minY, minZ, maxU, minV);
this.addBlockCorner(world, face, maxX, minY, maxZ, maxU, maxV);
}
if (face === 1) {
if (face === EnumBlockFace.TOP) {
this.addBlockCorner(world, face, maxX, maxY, maxZ, maxU, maxV);
this.addBlockCorner(world, face, maxX, maxY, minZ, maxU, minV);
this.addBlockCorner(world, face, minX, maxY, minZ, minU, minV);
this.addBlockCorner(world, face, minX, maxY, maxZ, minU, maxV);
}
if (face === 2) {
if (face === EnumBlockFace.EAST) {
this.addBlockCorner(world, face, minX, maxY, minZ, maxU, minV);
this.addBlockCorner(world, face, maxX, maxY, minZ, minU, minV);
this.addBlockCorner(world, face, maxX, minY, minZ, minU, maxV);
this.addBlockCorner(world, face, minX, minY, minZ, maxU, maxV);
}
if (face === 3) {
if (face === EnumBlockFace.WEST) {
this.addBlockCorner(world, face, minX, maxY, maxZ, minU, minV);
this.addBlockCorner(world, face, minX, minY, maxZ, minU, maxV);
this.addBlockCorner(world, face, maxX, minY, maxZ, maxU, maxV);
this.addBlockCorner(world, face, maxX, maxY, maxZ, maxU, minV);
}
if (face === 4) {
if (face === EnumBlockFace.NORTH) {
this.addBlockCorner(world, face, minX, maxY, maxZ, maxU, minV);
this.addBlockCorner(world, face, minX, maxY, minZ, minU, minV);
this.addBlockCorner(world, face, minX, minY, minZ, minU, maxV);
this.addBlockCorner(world, face, minX, minY, maxZ, maxU, maxV);
}
if (face === 5) {
if (face === EnumBlockFace.SOUTH) {
this.addBlockCorner(world, face, maxX, minY, maxZ, minU, maxV);
this.addBlockCorner(world, face, maxX, minY, minZ, maxU, maxV);
this.addBlockCorner(world, face, maxX, maxY, minZ, maxU, minV);
@@ -12,36 +12,29 @@ window.Tessellator = class {
}
startDrawing() {
this.verticies = [];
this.addedVertices = 0;
this.vertices = [];
this.uv = [];
this.index = [];
}
addVertexWithUV(x, y, z, u, v) {
this.addedVertices++;
// Add vertex
this.verticies.push(x);
this.verticies.push(y);
this.verticies.push(z);
this.vertices.push(x);
this.vertices.push(y);
this.vertices.push(z);
// Add UV
this.uv.push(u);
this.uv.push(v);
// Add index
let index = this.index.length / 6;
this.index.push(index + 0);
this.index.push(index + 2);
this.index.push(index + 1);
this.index.push(index + 0);
this.index.push(index + 3);
this.index.push(index + 2);
}
draw(group) {
let geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(this.verticies), 3));
geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(this.vertices), 3));
geometry.setAttribute('uv', new THREE.BufferAttribute(new Float32Array(this.uv), 2));
geometry.setIndex(new THREE.BufferAttribute(new Uint32Array(this.index), 1));
geometry.setIndex(new THREE.BufferAttribute(new Uint32Array([0, 2, 1, 0, 3, 2]), 1));
let mesh = new THREE.Mesh(geometry, this.material);
group.add(mesh);
@@ -8,7 +8,7 @@ window.WorldRenderer = class {
|| !!document.createElement('canvas').getContext('webgl'));
// Create cameras
this.camera = new THREE.PerspectiveCamera(0, 1, 0.001, 10000);
this.camera = new THREE.PerspectiveCamera(0, 1, 0.001, 1000000);
this.camera.rotation.order = 'ZYX';
this.camera.up = new THREE.Vector3(0, 0, 1);
@@ -27,8 +27,6 @@ window.ChunkSection = class {
this.dirty = false;
this.group.clear();
renderer.blockRenderer.tessellator.startDrawing();
for (let x = 0; x < ChunkSection.SIZE; x++) {
for (let y = 0; y < ChunkSection.SIZE; y++) {
for (let z = 0; z < ChunkSection.SIZE; z++) {
@@ -44,8 +42,6 @@ window.ChunkSection = class {
}
}
}
renderer.blockRenderer.tessellator.draw(this.group);
}
getBlockAt(x, y, z) {
@@ -13,6 +13,8 @@ window.World = class {
this.setBlockAt(x, 0, z, 1);
}
}
this.setBlockAt(0, 1, -2, 2);
}
getChunkAtBlock(x, y, z) {
@@ -0,0 +1,29 @@
window.EnumBlockFace = class {
constructor(x, y, z) {
this.x = x;
this.y = y;
this.z = z;
}
static values() {
return [
EnumBlockFace.TOP,
EnumBlockFace.BOTTOM,
EnumBlockFace.NORTH,
EnumBlockFace.EAST,
EnumBlockFace.SOUTH,
EnumBlockFace.WEST
];
}
}
{
let c = window.EnumBlockFace;
c.TOP = new EnumBlockFace(0, 1, 0);
c.BOTTOM = new EnumBlockFace(0, -1, 0);
c.NORTH = new EnumBlockFace(-1, 0, 0);
c.EAST = new EnumBlockFace(0, 0, -1);
c.SOUTH = new EnumBlockFace(1, 0, 0);
c.WEST = new EnumBlockFace(0, 0, 1);
}
+1
View File
@@ -47,6 +47,7 @@ loadScripts([
"libraries/three.min.js",
// Minecraft Source
"src/js/net/minecraft/util/EnumBlockFace.js",
"src/js/net/minecraft/util/Timer.js",
"src/js/net/minecraft/util/MathHelper.js",
"src/js/net/minecraft/util/BoundingBox.js",