diff --git a/src/html/viewer.html b/src/html/viewer.html
index 3ce2e56b..00324d24 100644
--- a/src/html/viewer.html
+++ b/src/html/viewer.html
@@ -41,11 +41,10 @@
Press r to reset the camera.
Press [ or ] to adjust how much each key press affects the scene.
- Use your arrow keys to rotate the model.
+ Use left and right arrow keys to rotate the model.
Use w and s to zoom in or out.
Use q and e to move the model up or down.
Use a and d to move the model left or right.
- Use . and / to tilt the model left or right.
Use 1 and 2 to quickly switch to the previous or next model.
diff --git a/src/js/jagex2/graphics/Model.ts b/src/js/jagex2/graphics/Model.ts
index bd6524d1..dec1a13b 100644
--- a/src/js/jagex2/graphics/Model.ts
+++ b/src/js/jagex2/graphics/Model.ts
@@ -1965,6 +1965,7 @@ export default class Model extends Hashable {
};
// todo: better name, Java relies on overloads
+ // this function is NOT near-clipped (helps with performance) so be careful how you use it!
drawSimple = (pitch: number, yaw: number, roll: number, eyePitch: number, eyeX: number, eyeY: number, eyeZ: number): void => {
const sinPitch: number = Draw3D.sin[pitch];
const cosPitch: number = Draw3D.cos[pitch];
@@ -2013,9 +2014,9 @@ export default class Model extends Hashable {
y = tmp;
if (Model.vertexScreenX && Model.vertexScreenY && Model.vertexScreenZ) {
+ Model.vertexScreenZ[v] = z - midZ;
Model.vertexScreenX[v] = Draw3D.centerX + (((x << 9) / z) | 0);
Model.vertexScreenY[v] = Draw3D.centerY + (((y << 9) / z) | 0);
- Model.vertexScreenZ[v] = z - midZ;
}
if (this.texturedFaceCount > 0 && Model.vertexViewSpaceX && Model.vertexViewSpaceY && Model.vertexViewSpaceZ) {
@@ -2139,6 +2140,7 @@ export default class Model extends Hashable {
temp = (y * cosEyePitch - z * sinEyePitch) >> 16;
z = (y * sinEyePitch + z * cosEyePitch) >> 16;
+ y = temp;
if (Model.vertexScreenZ) {
Model.vertexScreenZ[v] = z - midZ;
@@ -2146,7 +2148,7 @@ export default class Model extends Hashable {
if (z >= 50 && Model.vertexScreenX && Model.vertexScreenY) {
Model.vertexScreenX[v] = centerX + (((x << 9) / z) | 0);
- Model.vertexScreenY[v] = centerY + (((temp << 9) / z) | 0);
+ Model.vertexScreenY[v] = centerY + (((y << 9) / z) | 0);
} else if (Model.vertexScreenX) {
Model.vertexScreenX[v] = -5000;
clipped = true;
@@ -2154,7 +2156,7 @@ export default class Model extends Hashable {
if ((clipped || this.texturedFaceCount > 0) && Model.vertexViewSpaceX && Model.vertexViewSpaceY && Model.vertexViewSpaceZ) {
Model.vertexViewSpaceX[v] = x;
- Model.vertexViewSpaceY[v] = temp;
+ Model.vertexViewSpaceY[v] = y;
Model.vertexViewSpaceZ[v] = z;
}
}
diff --git a/src/js/playground.ts b/src/js/playground.ts
index 1f684cd5..a386ebf8 100644
--- a/src/js/playground.ts
+++ b/src/js/playground.ts
@@ -34,6 +34,21 @@ class Playground extends Client {
lastHistoryRefresh = 0;
historyRefresh = true;
+ private eyeX: number = 0;
+ private eyeY: number = 0;
+ private eyeZ: number = 0;
+ private eyePitch: number = 0;
+ private eyeYaw: number = 0;
+
+ modifier = 2;
+ model = {
+ id: parseInt(GameShell.getParameter('model')) || 0,
+ x: 0,
+ y: 0,
+ z: 420,
+ yaw: 0
+ };
+
constructor() {
super(true);
}
@@ -110,13 +125,6 @@ class Playground extends Client {
if (this.lastHistoryRefresh > 50) {
if (this.historyRefresh) {
GameShell.setParameter('model', this.model.id.toString());
- GameShell.setParameter('x', this.model.pitch.toString());
- GameShell.setParameter('y', this.model.yaw.toString());
- GameShell.setParameter('z', this.model.roll.toString());
- GameShell.setParameter('eyeX', this.camera.x.toString());
- GameShell.setParameter('eyeY', this.camera.y.toString());
- GameShell.setParameter('eyeZ', this.camera.z.toString());
- GameShell.setParameter('eyePitch', this.camera.pitch.toString());
this.historyRefresh = false;
}
@@ -129,50 +137,14 @@ class Playground extends Client {
Draw2D.clear();
Draw2D.fillRect(0, 0, this.width, this.height, 0x555555);
- /// draw all textures
- // let x = 0;
- // let y = 0;
- // for (let i = 0; i < Draw3D.textureCount; i++) {
- // if (x > this.width) {
- // x = 0;
- // y += 128;
- // }
-
- // Draw3D.textures[i].draw(x, y);
- // x += 128;
- // }
-
- /// draw all flotypes
- // let x = 0;
- // let y = this.b12.fontHeight;
- // for (let i = 0; i < FloType.count; i++) {
- // let flo = FloType.get(i);
- // this.b12.draw(x, y, `${i}: ${flo.name}`, Colors.YELLOW);
-
- // let textSize = this.b12.getTextWidth(`${i}: ${flo.name}`);
-
- // if (flo.texture !== -1) {
- // Draw3D.textures[flo.texture].draw(x + textSize, y - this.b12.fontHeight + 1, this.b12.fontHeight, this.b12.fontHeight);
- // } else {
- // Draw2D.fillRect(x + textSize, y - this.b12.fontHeight + 1, this.b12.fontHeight, this.b12.fontHeight, flo.rgb);
- // }
-
- // y += this.b12.fontHeight;
- // if (y > this.height) {
- // x += 200;
- // y = this.b12.fontHeight;
- // }
- // }
-
// draw a model
const model: Model = Model.model(this.model.id);
model.calculateNormals(64, 850, -30, -50, -30, true);
- model.drawSimple(this.model.pitch | 0, this.model.yaw | 0, this.model.roll | 0, this.camera.pitch | 0, this.camera.x | 0, this.camera.y | 0, this.camera.z | 0);
+ model.draw(this.model.yaw, Draw3D.sin[this.eyePitch], Draw3D.cos[this.eyePitch], Draw3D.sin[this.eyeYaw], Draw3D.cos[this.eyeYaw], this.model.x - this.eyeX, this.model.y - this.eyeY, this.model.z - this.eyeZ, 0);
// debug
if (this.fontBold12) {
this.fontBold12.drawStringRight(this.width, this.fontBold12.height, `FPS: ${this.fps}`, Colors.YELLOW);
- this.fontBold12.drawStringRight(this.width, this.height, `${this.model.pitch},${this.model.yaw},${this.model.roll},${this.camera.pitch},${this.camera.x},${this.camera.z},${this.camera.y}`, Colors.YELLOW);
// controls
let leftY: number = this.fontBold12.height;
@@ -204,20 +176,6 @@ class Playground extends Client {
// ----
- modifier = 2;
- model = {
- id: parseInt(GameShell.getParameter('model')) || 0,
- pitch: parseInt(GameShell.getParameter('x')) || 0,
- yaw: parseInt(GameShell.getParameter('y')) || 0,
- roll: parseInt(GameShell.getParameter('z')) || 0
- };
- camera = {
- x: parseInt(GameShell.getParameter('eyeX')) || 0,
- y: parseInt(GameShell.getParameter('eyeY')) || 0,
- z: parseInt(GameShell.getParameter('eyeZ')) || 420,
- pitch: parseInt(GameShell.getParameter('eyePitch')) || 0
- };
-
updateKeysPressed(): void {
// eslint-disable-next-line no-constant-condition
while (true) {
@@ -228,18 +186,6 @@ class Playground extends Client {
if (key === 'r'.charCodeAt(0)) {
this.modifier = 2;
- this.model = {
- id: this.model.id,
- pitch: 0,
- yaw: 0,
- roll: 0
- };
- this.camera = {
- x: 0,
- y: 0,
- z: 420,
- pitch: 0
- };
this.historyRefresh = true;
} else if (key === '1'.charCodeAt(0)) {
this.model.id--;
@@ -274,51 +220,33 @@ class Playground extends Client {
this.historyRefresh = true;
}
- if (this.actionKey[3]) {
- // up arrow
- this.model.pitch -= this.modifier;
- this.historyRefresh = true;
- } else if (this.actionKey[4]) {
- // down arrow
- this.model.pitch += this.modifier;
- this.historyRefresh = true;
- }
-
- if (this.actionKey['.'.charCodeAt(0)]) {
- this.model.roll += this.modifier;
- this.historyRefresh = true;
- } else if (this.actionKey['/'.charCodeAt(0)]) {
- this.model.roll -= this.modifier;
- this.historyRefresh = true;
- }
-
if (this.actionKey['w'.charCodeAt(0)]) {
- this.camera.z -= this.modifier;
+ this.model.z -= this.modifier;
this.historyRefresh = true;
} else if (this.actionKey['s'.charCodeAt(0)]) {
- this.camera.z += this.modifier;
+ this.model.z += this.modifier;
this.historyRefresh = true;
}
if (this.actionKey['a'.charCodeAt(0)]) {
- this.camera.x -= this.modifier;
+ this.model.x -= this.modifier;
this.historyRefresh = true;
} else if (this.actionKey['d'.charCodeAt(0)]) {
- this.camera.x += this.modifier;
+ this.model.x += this.modifier;
this.historyRefresh = true;
}
if (this.actionKey['q'.charCodeAt(0)]) {
- this.camera.y -= this.modifier;
+ this.model.y += this.modifier;
this.historyRefresh = true;
} else if (this.actionKey['e'.charCodeAt(0)]) {
- this.camera.y += this.modifier;
+ this.model.y -= this.modifier;
this.historyRefresh = true;
}
- this.model.pitch = this.model.pitch & 2047;
+ this.eyePitch = this.eyePitch & 2047;
+ this.eyeYaw = this.eyeYaw & 2047;
this.model.yaw = this.model.yaw & 2047;
- this.model.roll = this.model.roll & 2047;
}
}
diff --git a/src/js/viewer.ts b/src/js/viewer.ts
index 2d01a44e..17e28545 100644
--- a/src/js/viewer.ts
+++ b/src/js/viewer.ts
@@ -32,19 +32,20 @@ class Viewer extends Client {
midiStore: DiskStore | null = null;
mapStore: DiskStore | null = null;
+ private eyeX: number = 0;
+ private eyeY: number = 0;
+ private eyeZ: number = 0;
+ private eyePitch: number = 0;
+ private eyeYaw: number = 0;
+
modifier = 2;
model = {
id: parseInt(GameShell.getParameter('model')) || 0,
- pitch: parseInt(GameShell.getParameter('x')) || 0,
- yaw: parseInt(GameShell.getParameter('y')) || 0,
- roll: parseInt(GameShell.getParameter('z')) || 0,
- built: null as Model | null
- };
- camera = {
- x: parseInt(GameShell.getParameter('eyeX')) || 0,
- y: parseInt(GameShell.getParameter('eyeY')) || 0,
- z: parseInt(GameShell.getParameter('eyeZ')) || 420,
- pitch: parseInt(GameShell.getParameter('eyePitch')) || 0
+ built: null as Model | null,
+ x: 0,
+ y: 0,
+ z: 420,
+ yaw: 0
};
constructor() {
@@ -132,7 +133,7 @@ class Viewer extends Client {
Draw2D.fillRect(0, 0, this.width, this.height, Colors.BLACK);
if (this.model.built !== null) {
- this.model.built.drawSimple(this.model.pitch | 0, this.model.yaw | 0, this.model.roll | 0, this.camera.pitch | 0, this.camera.x | 0, this.camera.y | 0, this.camera.z | 0);
+ this.model.built.draw(this.model.yaw, Draw3D.sin[this.eyePitch], Draw3D.cos[this.eyePitch], Draw3D.sin[this.eyeYaw], Draw3D.cos[this.eyeYaw], this.model.x - this.eyeX, this.model.y - this.eyeY, this.model.z - this.eyeZ, 0);
}
this.drawArea?.draw(0, 0);
@@ -233,13 +234,15 @@ class Viewer extends Client {
if (key === 'r'.charCodeAt(0)) {
this.modifier = 2;
- this.model.pitch = 0;
+ this.eyeX = 0;
+ this.eyeY = 0;
+ this.eyeZ = 0;
+ this.eyePitch = 0;
+ this.eyeYaw = 0;
+ this.model.x = 0;
+ this.model.y = 0;
+ this.model.z = 420;
this.model.yaw = 0;
- this.model.roll = 0;
- this.camera.x = 0;
- this.camera.y = 0;
- this.camera.z = 420;
- this.camera.pitch = 0;
} else if (key === '1'.charCodeAt(0)) {
this.model.id--;
if (Model.metadata && this.model.id < 0) {
@@ -271,41 +274,27 @@ class Viewer extends Client {
this.model.yaw -= this.modifier;
}
- if (this.actionKey[3]) {
- // up arrow
- this.model.pitch -= this.modifier;
- } else if (this.actionKey[4]) {
- // down arrow
- this.model.pitch += this.modifier;
- }
-
- if (this.actionKey['.'.charCodeAt(0)]) {
- this.model.roll += this.modifier;
- } else if (this.actionKey['/'.charCodeAt(0)]) {
- this.model.roll -= this.modifier;
- }
-
if (this.actionKey['w'.charCodeAt(0)]) {
- this.camera.z -= this.modifier;
+ this.model.z -= this.modifier;
} else if (this.actionKey['s'.charCodeAt(0)]) {
- this.camera.z += this.modifier;
+ this.model.z += this.modifier;
}
if (this.actionKey['a'.charCodeAt(0)]) {
- this.camera.x -= this.modifier;
+ this.model.x -= this.modifier;
} else if (this.actionKey['d'.charCodeAt(0)]) {
- this.camera.x += this.modifier;
+ this.model.x += this.modifier;
}
if (this.actionKey['q'.charCodeAt(0)]) {
- this.camera.y -= this.modifier;
+ this.model.y -= this.modifier;
} else if (this.actionKey['e'.charCodeAt(0)]) {
- this.camera.y += this.modifier;
+ this.model.y += this.modifier;
}
- this.model.pitch = this.model.pitch & 2047;
+ this.eyePitch = this.eyePitch & 2047;
+ this.eyeYaw = this.eyeYaw & 2047;
this.model.yaw = this.model.yaw & 2047;
- this.model.roll = this.model.roll & 2047;
}
}