From 0e236f8569edce70bb9a4e64e48bdc24b4102fed Mon Sep 17 00:00:00 2001 From: Pazaz Date: Fri, 16 Feb 2024 13:30:51 -0500 Subject: [PATCH] fix: Near clipping in playground and viewer --- src/html/viewer.html | 3 +- src/js/jagex2/graphics/Model.ts | 8 ++- src/js/playground.ts | 120 +++++++------------------------- src/js/viewer.ts | 67 ++++++++---------- 4 files changed, 58 insertions(+), 140 deletions(-) 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; } }