Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feature/webgl #3

Draft
wants to merge 7 commits into
base: main
Choose a base branch
from
Draft

feature/webgl #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
edc1f97
WebGL Progress
Battlerax Mar 20, 2024
9079210
disable breaking changes to allow pg2 to render again
Battlerax Mar 20, 2024
269d04e
merge: from origin main
ultraviolet-jordan Apr 8, 2024
59447f0
merge: from origin main
ultraviolet-jordan Apr 8, 2024
1ea29c2
merge webgl
lesleyrs Jun 23, 2024
7973eb9
fix merge
lesleyrs Jun 23, 2024
6bbb42e
Merge main into feature/webgl (#16)
Pazaz Jun 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Empty file modified .husky/pre-commit
100644 → 100755
View file
Open in desktop
Empty file.
30 changes: 30 additions & 0 deletions src/html/game_gl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<html>
<head>
<title>WebGL</title>

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

<style>
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
color: #fff;
background-color: #000;
}

canvas {
display: block;
margin: 0 auto;
outline: none;
-webkit-tap-highlight-color: hwb(0 0% 100% / 0); /* mobile webkit */
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>
30 changes: 30 additions & 0 deletions src/html/pg2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<html>
<head>
<title>RuneScape 2 Playground</title>

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

<style>
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
color: #fff;
background-color: #000;
}

canvas {
display: block;
margin: 0 auto;
outline: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* mobile webkit */
}
</style>
</head>
<body>
<canvas id="canvas" hidden></canvas>
</body>
</html>
9,058 changes: 9,058 additions & 0 deletions src/js/game_gl.ts
View file
Open in desktop

Large diffs are not rendered by default.

7 changes: 7 additions & 0 deletions src/js/jagex2/client/GameShell.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import {sleep} from '../util/JsUtil';
import {CanvasEnabledKeys, KeyCodes} from './KeyCodes';
import InputTracking from './InputTracking';
import {canvas, canvas2d} from '../graphics/Canvas';
import DrawGL from '../graphics/DrawGL';
import {RenderMode} from '../graphics/RenderMode';

export default abstract class GameShell {
static getParameter(name: string): string {
Expand Down Expand Up @@ -62,6 +64,8 @@ export default abstract class GameShell {
private nx: number = 0;
private ny: number = 0;

protected renderMode: RenderMode = RenderMode.GPU;

constructor(resizetoFit: boolean = false) {
canvas.tabIndex = -1;
canvas2d.fillStyle = 'black';
Expand All @@ -72,6 +76,9 @@ export default abstract class GameShell {
} else {
this.resize(canvas.width, canvas.height);
}
if (this.renderMode === RenderMode.GPU) {
DrawGL.init();
}
}

abstract getTitleScreenState(): number;
Expand Down
28 changes: 19 additions & 9 deletions src/js/jagex2/dash3d/World3D.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import TileOverlay from './type/TileOverlay';
import TileOverlayShape from './type/TileOverlayShape';
import LocAngle from './LocAngle';
import {Int32Array3d, TypedArray1d, TypedArray2d, TypedArray3d, TypedArray4d} from '../util/Arrays';
import DrawGL from '../graphics/DrawGL';

export default class World3D {
private static visibilityMatrix: boolean[][][][] = new TypedArray4d(8, 32, 51, 51, false);
Expand Down Expand Up @@ -988,7 +989,13 @@ export default class World3D {
World3D.clickTileZ = -1;
};

// WebGL change -> draw scene
draw = (eyeX: number, eyeY: number, eyeZ: number, topLevel: number, eyeYaw: number, eyePitch: number, loopCycle: number): void => {
// WebGL change -> pre-draw scene callback
if (DrawGL.GL_ENABLED) {
DrawGL.preDrawScene(eyeX, eyeY, eyeZ, topLevel, eyeYaw, eyePitch);
}

if (eyeX < 0) {
eyeX = 0;
} else if (eyeX >= this.maxTileX * 128) {
Expand All @@ -1001,6 +1008,8 @@ export default class World3D {
eyeZ = this.maxTileZ * 128 - 1;
}

const distance: number = DrawGL.GL_ENABLED ? DrawGL.renderDistance : 25;

World3D.cycle++;
World3D.sinEyePitch = Draw3D.sin[eyePitch];
World3D.cosEyePitch = Draw3D.cos[eyePitch];
Expand All @@ -1015,22 +1024,22 @@ export default class World3D {
World3D.eyeTileZ = (eyeZ / 128) | 0;
World3D.topLevel = topLevel;

World3D.minDrawTileX = World3D.eyeTileX - 25;
World3D.minDrawTileX = World3D.eyeTileX - distance;
if (World3D.minDrawTileX < 0) {
World3D.minDrawTileX = 0;
}

World3D.minDrawTileZ = World3D.eyeTileZ - 25;
World3D.minDrawTileZ = World3D.eyeTileZ - distance;
if (World3D.minDrawTileZ < 0) {
World3D.minDrawTileZ = 0;
}

World3D.maxDrawTileX = World3D.eyeTileX + 25;
World3D.maxDrawTileX = World3D.eyeTileX + distance;
if (World3D.maxDrawTileX > this.maxTileX) {
World3D.maxDrawTileX = this.maxTileX;
}

World3D.maxDrawTileZ = World3D.eyeTileZ + 25;
World3D.maxDrawTileZ = World3D.eyeTileZ + distance;
if (World3D.maxDrawTileZ > this.maxTileZ) {
World3D.maxDrawTileZ = this.maxTileZ;
}
Expand All @@ -1047,7 +1056,8 @@ export default class World3D {
continue;
}

if (tile.drawLevel <= topLevel && (World3D.visibilityMap[x + 25 - World3D.eyeTileX][z + 25 - World3D.eyeTileZ] || this.levelHeightmaps[level][x][z] - eyeY >= 2000)) {
// WebGL change -> visibility check (increase draw distance)
if (tile.drawLevel <= topLevel && ((!DrawGL.GL_ENABLED && World3D.visibilityMap[x + distance - World3D.eyeTileX][z + distance - World3D.eyeTileZ]) || this.levelHeightmaps[level][x][z] - eyeY >= 2000)) {
tile.visible = true;
tile.update = true;
tile.containsLocs = tile.locCount > 0;
Expand All @@ -1063,15 +1073,15 @@ export default class World3D {

for (let level: number = this.minLevel; level < this.maxLevel; level++) {
const tiles: (Tile | null)[][] = this.levelTiles[level];
for (let dx: number = -25; dx <= 0; dx++) {
for (let dx: number = -distance; dx <= 0; dx++) {
const rightTileX: number = World3D.eyeTileX + dx;
const leftTileX: number = World3D.eyeTileX - dx;

if (rightTileX < World3D.minDrawTileX && leftTileX >= World3D.maxDrawTileX) {
continue;
}

for (let dz: number = -25; dz <= 0; dz++) {
for (let dz: number = -distance; dz <= 0; dz++) {
const forwardTileZ: number = World3D.eyeTileZ + dz;
const backwardTileZ: number = World3D.eyeTileZ - dz;
let tile: Tile | null;
Expand Down Expand Up @@ -1117,14 +1127,14 @@ export default class World3D {

for (let level: number = this.minLevel; level < this.maxLevel; level++) {
const tiles: (Tile | null)[][] = this.levelTiles[level];
for (let dx: number = -25; dx <= 0; dx++) {
for (let dx: number = -distance; dx <= 0; dx++) {
const rightTileX: number = World3D.eyeTileX + dx;
const leftTileX: number = World3D.eyeTileX - dx;
if (rightTileX < World3D.minDrawTileX && leftTileX >= World3D.maxDrawTileX) {
continue;
}

for (let dz: number = -25; dz <= 0; dz++) {
for (let dz: number = -distance; dz <= 0; dz++) {
const forwardTileZ: number = World3D.eyeTileZ + dz;
const backgroundTileZ: number = World3D.eyeTileZ - dz;
let tile: Tile | null;
Expand Down
6 changes: 4 additions & 2 deletions src/js/jagex2/graphics/Canvas.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
export const canvasFake: HTMLCanvasElement = document.createElement('canvas') as HTMLCanvasElement;
export const canvas: HTMLCanvasElement = document.getElementById('canvas') as HTMLCanvasElement;
export const canvas2d: CanvasRenderingContext2D = canvas.getContext('2d', {willReadFrequently: true})!;

export const canvas2d: CanvasRenderingContext2D = canvasFake.getContext('2d', {willReadFrequently: true})!;
export const jpegCanvas: HTMLCanvasElement = document.createElement('canvas');
export const jpegImg: HTMLImageElement = document.createElement('img');
export const jpeg2d: CanvasRenderingContext2D = jpegCanvas.getContext('2d', {willReadFrequently: true})!;
export const glCanvas: HTMLCanvasElement = document.createElement('canvas');
export const gl: WebGL2RenderingContext = canvas.getContext('webgl2', {willReadFrequently: true})! as WebGL2RenderingContext;
16 changes: 16 additions & 0 deletions src/js/jagex2/graphics/Draw3D.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import Draw2D from './Draw2D';
import Pix8 from './Pix8';
import Jagfile from '../io/Jagfile';
import {Int32Array2d, TypedArray1d} from '../util/Arrays';
import DrawGL from './DrawGL';

// noinspection JSSuspiciousNameCombination,DuplicatedCode
export default class Draw3D extends Draw2D {
Expand All @@ -15,6 +16,7 @@ export default class Draw3D extends Draw2D {

static textures: (Pix8 | null)[] = new TypedArray1d(50, null);
static textureCount: number = 0;
static textureBrightness: number = 1;

static lineOffset: Int32Array = new Int32Array();
static centerX: number = 0;
Expand Down Expand Up @@ -152,6 +154,7 @@ export default class Draw3D extends Draw2D {
};

static setBrightness = (brightness: number): void => {
this.textureBrightness = brightness;
const randomBrightness: number = brightness + Math.random() * 0.03 - 0.015;
let offset: number = 0;
for (let y: number = 0; y < 512; y++) {
Expand Down Expand Up @@ -261,6 +264,10 @@ export default class Draw3D extends Draw2D {
};

static fillGouraudTriangle = (xA: number, xB: number, xC: number, yA: number, yB: number, yC: number, colorA: number, colorB: number, colorC: number): void => {
//WebGL change -> don't draw on CPU if GL is enabled
if (DrawGL.GL_ENABLED) {
return;
}
let xStepAB: number = 0;
let colorStepAB: number = 0;
if (yB !== yA) {
Expand Down Expand Up @@ -884,6 +891,10 @@ export default class Draw3D extends Draw2D {
};

static fillTriangle = (x0: number, x1: number, x2: number, y0: number, y1: number, y2: number, color: number): void => {
//WebGL change -> don't draw on CPU if GL is enabled
if (DrawGL.GL_ENABLED) {
return;
}
let xStepAB: number = 0;
if (y1 !== y0) {
xStepAB = (((x1 - x0) << 16) / (y1 - y0)) | 0;
Expand Down Expand Up @@ -1326,6 +1337,11 @@ export default class Draw3D extends Draw2D {
tzC: number,
texture: number
): void => {
//WebGL change -> don't draw on CPU if GL is enabled
if (DrawGL.GL_ENABLED) {
return;
}

const texels: Int32Array | null = this.getTexels(texture);
this.opaque = !this.textureTranslucent[texture];

Expand Down
Loading
Loading