render proper character with test animation

(cherry picked from commit 0f3b3a0d6ff8be5e3b1ad47a25943cf1d62cc6eb)
This commit is contained in:
LabyStudio
2022-04-13 16:16:47 +02:00
parent 8db692083b
commit 62a43c2468
6 changed files with 86 additions and 72 deletions
@@ -18,14 +18,19 @@ window.EntityRenderer = class {
// Translate using interpolated position // Translate using interpolated position
group.position.setX(interpolatedX); group.position.setX(interpolatedX);
group.position.setY(interpolatedY); group.position.setY(interpolatedY + 1.4);
group.position.setZ(interpolatedZ); group.position.setZ(interpolatedZ);
// Actual size of the entity // Actual size of the entity
let scale = 7.0 / 120.0; let scale = 7.0 / 120.0;
group.scale.set(scale, scale, scale); group.scale.set(scale, -scale, scale);
this.model.render(group, 0); // Rotate entity model
group.rotation.y = MathHelper.toRadians(-entity.yaw + 180);
// Render entity model
let time = Date.now() / 100;
this.model.render(group, time);
} }
} }
@@ -17,7 +17,7 @@ window.ModelBase = class {
* @param time Animation offset * @param time Animation offset
*/ */
render(group, time) { render(group, time) {
group.updateMatrix();
} }
} }
@@ -6,33 +6,42 @@ window.ModelPlayer = class extends ModelBase {
constructor() { constructor() {
super(); super();
let width = 64;
let height = 32;
// Create head ModelRenderer // Create head ModelRenderer
this.head = new ModelRenderer(0, 0) this.head = new ModelRenderer(width, height)
.setTextureOffset(0, 0)
.setBox(-4.0, -8.0, -4.0, 8, 8, 8); .setBox(-4.0, -8.0, -4.0, 8, 8, 8);
// Create body ModelRenderer // Create body ModelRenderer
this.body = new ModelRenderer(16, 16) this.body = new ModelRenderer(width, height)
.setTextureOffset(16, 16)
.setBox(-4.0, 0.0, -2.0, 8, 12, 4); .setBox(-4.0, 0.0, -2.0, 8, 12, 4);
// Right arm ModelRenderer // Right arm ModelRenderer
this.rightArm = new ModelRenderer(40, 16) this.rightArm = new ModelRenderer(width, height)
.setTextureOffset(40, 16)
.setPosition(-5.0, 2.0, 0.0)
.setBox(-3.0, -2.0, -2.0, 4, 12, 4); .setBox(-3.0, -2.0, -2.0, 4, 12, 4);
this.rightArm.setPosition(-5.0, 2.0, 0.0);
// Left arm ModelRenderer // Left arm ModelRenderer
this.leftArm = new ModelRenderer(40, 16) this.leftArm = new ModelRenderer(width, height)
.setTextureOffset(40, 16)
.setPosition(5.0, 2.0, 0.0)
.setBox(-1.0, -2.0, -2.0, 4, 12, 4); .setBox(-1.0, -2.0, -2.0, 4, 12, 4);
this.leftArm.setPosition(5.0, 2.0, 0.0);
// Right Legs ModelRenderer // Right Legs ModelRenderer
this.rightLeg = new ModelRenderer(0, 16) this.rightLeg = new ModelRenderer(width, height)
.setTextureOffset(0, 16)
.setPosition(-2.0, 12.0, 0.0)
.setBox(-2.0, 0.0, -2.0, 4, 12, 4); .setBox(-2.0, 0.0, -2.0, 4, 12, 4);
this.rightLeg.setPosition(-2.0, 12.0, 0.0);
// Left leg ModelRenderer // Left leg ModelRenderer
this.leftLeg = new ModelRenderer(0, 16) this.leftLeg = new ModelRenderer(width, height)
.setTextureOffset(0, 16)
.setPosition(2.0, 12.0, 0.0)
.setBox(-2.0, 0.0, -2.0, 4, 12, 4); .setBox(-2.0, 0.0, -2.0, 4, 12, 4);
this.leftLeg.setPosition(2.0, 12.0, 0.0);
} }
rebuild(tessellator, group) { rebuild(tessellator, group) {
@@ -70,6 +79,8 @@ window.ModelPlayer = class extends ModelBase {
this.leftArm.render(group); this.leftArm.render(group);
this.rightLeg.render(group); this.rightLeg.render(group);
this.leftLeg.render(group); this.leftLeg.render(group);
super.render(group, time);
} }
} }
@@ -2,13 +2,13 @@ window.ModelRenderer = class {
/** /**
* Create cube object * Create cube object
*
* @param textureOffsetX x offset position on the texture
* @param textureOffsetY y offset position on the texture
*/ */
constructor(textureOffsetX, textureOffsetY) { constructor(textureWidth, textureHeight) {
this.textureOffsetX = textureOffsetX; this.textureWidth = textureWidth;
this.textureOffsetY = textureOffsetY; this.textureHeight = textureHeight;
this.textureOffsetX = 0;
this.textureOffsetY = 0;
this.xRotation = 0; this.xRotation = 0;
this.yRotation = 0; this.yRotation = 0;
@@ -31,9 +31,7 @@ window.ModelRenderer = class {
this.textureOffsetX = textureOffsetX; this.textureOffsetX = textureOffsetX;
this.textureOffsetY = textureOffsetY; this.textureOffsetY = textureOffsetY;
this.xRotation = 0; return this;
this.yRotation = 0;
this.zRotation = 0;
} }
/** /**
@@ -54,16 +52,16 @@ window.ModelRenderer = class {
let z = offsetZ + depth; let z = offsetZ + depth;
// Create bottom vertex points of cube // Create bottom vertex points of cube
let vertexBottom1 = new Vertex(offsetX, offsetY, offsetZ, 0.0, 0.0); let vertexBottom1 = new Vertex(offsetX, offsetY, offsetZ);
let vertexBottom2 = new Vertex(x, offsetY, offsetZ, 0.0, 8.0); let vertexBottom2 = new Vertex(x, offsetY, offsetZ);
let vertexBottom3 = new Vertex(offsetX, offsetY, z, 0.0, 0.0); let vertexBottom3 = new Vertex(offsetX, offsetY, z);
let vertexBottom4 = new Vertex(x, offsetY, z, 0.0, 8.0); let vertexBottom4 = new Vertex(x, offsetY, z);
// Create top vertex points of cube // Create top vertex points of cube
let vertexTop1 = new Vertex(x, y, z, 8.0, 8.0); let vertexTop1 = new Vertex(x, y, z);
let vertexTop2 = new Vertex(offsetX, y, z, 8.0, 0.0); let vertexTop2 = new Vertex(offsetX, y, z);
let vertexTop3 = new Vertex(x, y, offsetZ, 8.0, 8.0); let vertexTop3 = new Vertex(x, y, offsetZ);
let vertexTop4 = new Vertex(offsetX, y, offsetZ, 8.0, 0.0); let vertexTop4 = new Vertex(offsetX, y, offsetZ);
// Create polygons for each cube side // Create polygons for each cube side
this.polygons[0] = new Polygon( this.polygons[0] = new Polygon(
@@ -71,7 +69,8 @@ window.ModelRenderer = class {
this.textureOffsetX + depth + width, this.textureOffsetX + depth + width,
this.textureOffsetY + depth, this.textureOffsetY + depth,
this.textureOffsetX + depth + width + depth, this.textureOffsetX + depth + width + depth,
this.textureOffsetY + depth + height this.textureOffsetY + depth + height,
this.textureWidth, this.textureHeight
); );
this.polygons[1] = new Polygon( this.polygons[1] = new Polygon(
@@ -79,7 +78,8 @@ window.ModelRenderer = class {
this.textureOffsetX, this.textureOffsetX,
this.textureOffsetY + depth, this.textureOffsetY + depth,
this.textureOffsetX + depth, this.textureOffsetX + depth,
this.textureOffsetY + depth + height this.textureOffsetY + depth + height,
this.textureWidth, this.textureHeight
); );
this.polygons[2] = new Polygon( this.polygons[2] = new Polygon(
@@ -87,7 +87,8 @@ window.ModelRenderer = class {
this.textureOffsetX + depth, this.textureOffsetX + depth,
this.textureOffsetY, this.textureOffsetY,
this.textureOffsetX + depth + width, this.textureOffsetX + depth + width,
this.textureOffsetY + depth this.textureOffsetY + depth,
this.textureWidth, this.textureHeight
); );
this.polygons[3] = new Polygon( this.polygons[3] = new Polygon(
@@ -95,7 +96,8 @@ window.ModelRenderer = class {
this.textureOffsetX + depth + width, this.textureOffsetX + depth + width,
this.textureOffsetY, this.textureOffsetY,
this.textureOffsetX + depth + width + width, this.textureOffsetX + depth + width + width,
this.textureOffsetY + depth this.textureOffsetY + depth,
this.textureWidth, this.textureHeight
); );
this.polygons[4] = new Polygon( this.polygons[4] = new Polygon(
@@ -103,7 +105,8 @@ window.ModelRenderer = class {
this.textureOffsetX + depth, this.textureOffsetX + depth,
this.textureOffsetY + depth, this.textureOffsetY + depth,
this.textureOffsetX + depth + width, this.textureOffsetX + depth + width,
this.textureOffsetY + depth + height this.textureOffsetY + depth + height,
this.textureWidth, this.textureHeight
); );
this.polygons[5] = new Polygon( this.polygons[5] = new Polygon(
@@ -111,7 +114,8 @@ window.ModelRenderer = class {
this.textureOffsetX + depth + width + depth, this.textureOffsetX + depth + width + depth,
this.textureOffsetY + depth, this.textureOffsetY + depth,
this.textureOffsetX + depth + width + depth + width, this.textureOffsetX + depth + width + depth + width,
this.textureOffsetY + depth + height this.textureOffsetY + depth + height,
this.textureWidth, this.textureHeight
); );
return this; return this;
@@ -128,6 +132,7 @@ window.ModelRenderer = class {
this.x = x; this.x = x;
this.y = y; this.y = y;
this.z = z; this.z = z;
return this;
} }
rebuild(tessellator, group) { rebuild(tessellator, group) {
@@ -154,6 +159,8 @@ window.ModelRenderer = class {
this.bone.rotation.x = this.xRotation; this.bone.rotation.x = this.xRotation;
this.bone.rotation.y = this.yRotation; this.bone.rotation.y = this.yRotation;
this.bone.rotation.z = this.zRotation; this.bone.rotation.z = this.zRotation;
this.bone.updateMatrix();
} }
} }
@@ -1,23 +1,23 @@
window.Polygon = class { window.Polygon = class {
/** constructor(vertices, minU, minV, maxU, maxV, textureWidth, textureHeight) {
* Bind UV mappings on the vertices
*
* @param vertices Vertex array
* @param minU Minimum U coordinate
* @param minV Minimum V coordinate
* @param maxU Maximum U coordinate
* @param maxV Maximum V coordinate
*/
constructor(vertices, minU, minV, maxU, maxV) {
this.vertices = vertices; this.vertices = vertices;
this.vertexCount = vertices.length; this.vertexCount = vertices.length;
minU /= textureWidth;
minV /= textureHeight;
maxU /= textureWidth;
maxV /= textureHeight;
// Flip V
minV = 1 - minV;
maxV = 1 - maxV;
// Map UV on vertices // Map UV on vertices
vertices[0] = vertices[0].remap(maxU, minV); vertices[0] = Vertex.create(vertices[0].position).withUV(maxU, minV);
vertices[1] = vertices[1].remap(minU, minV); vertices[1] = Vertex.create(vertices[1].position).withUV(minU, minV);
vertices[2] = vertices[2].remap(minU, maxV); vertices[2] = Vertex.create(vertices[2].position).withUV(minU, maxV);
vertices[3] = vertices[3].remap(maxU, maxV); vertices[3] = Vertex.create(vertices[3].position).withUV(maxU, maxV);
} }
render(tessellator) { render(tessellator) {
@@ -29,13 +29,7 @@ window.Polygon = class {
let vertex = this.vertices[i]; let vertex = this.vertices[i];
// Bind UV mappings and render vertex // Bind UV mappings and render vertex
tessellator.addVertexWithUV( tessellator.addVertexWithUV(vertex.position.x, vertex.position.y, vertex.position.z, vertex.u, vertex.v);
vertex.position.x,
vertex.position.y,
vertex.position.z,
vertex.u / 64.0,
vertex.v / 32.0
);
} }
} }
} }
@@ -6,24 +6,21 @@ window.Vertex = class {
* @param x X position * @param x X position
* @param y Y position * @param y Y position
* @param z Z position * @param z Z position
* @param u U mapping
* @param v V mapping
*/ */
constructor(x, y, z, u, v) { constructor(x, y, z) {
this.position = new Vector3(x, y, z); this.position = new Vector3(x, y, z);
this.u = u; this.u = 0;
this.v = v; this.v = 0;
} }
/** withUV(u, v) {
* Create a new vertex of the current one with different UV mappings this.u = u;
* this.v = v;
* @param u New U mapping return this;
* @param v New V mapping }
* @return New vertex with the vector position of the current one
*/ static create(vector) {
remap(u, v) { return new Vertex(vector.x, vector.y, vector.z);
return new Vertex(this.position.x, this.position.y, this.position.z, u, v);
} }
} }