Skip to content

Commit

Permalink
fix: Near clipping in playground and viewer
Browse files Browse the repository at this point in the history
  • Loading branch information
@Pazaz
Pazaz committed Feb 16, 2024
1 parent 57aebd6 commit 0e236f8
Show file tree
Hide file tree
Showing 4 changed files with 58 additions and 140 deletions.
3 changes: 1 addition & 2 deletions src/html/viewer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,11 +41,10 @@
<div class="small-6 cell">
Press <code>r</code> to reset the camera.<br>
Press <code>[</code> or <code>]</code> to adjust how much each key press affects the scene.<br>
Use your arrow keys to rotate the model.<br>
Use <code>left</code> and <code>right</code> arrow keys to rotate the model.<br>
Use <code>w</code> and <code>s</code> to zoom in or out.<br>
Use <code>q</code> and <code>e</code> to move the model up or down.<br>
Use <code>a</code> and <code>d</code> to move the model left or right.<br>
Use <code>.</code> and <code>/</code> to tilt the model left or right.<br>
Use <code>1</code> and <code>2</code> to quickly switch to the previous or next model.<br>
</div>

Expand Down
8 changes: 5 additions & 3 deletions src/js/jagex2/graphics/Model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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];
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -2139,22 +2140,23 @@ 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;
}

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;
}

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;
}
}
Expand Down
120 changes: 24 additions & 96 deletions src/js/playground.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down Expand Up @@ -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;
}
Expand All @@ -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;
Expand Down Expand Up @@ -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) {
Expand All @@ -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--;
Expand Down Expand Up @@ -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;
}
}

Expand Down
67 changes: 28 additions & 39 deletions src/js/viewer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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;
}
}

Expand Down

0 comments on commit 0e236f8

Please sign in to comment.