Skip to content

Commit 94bd5ee

Browse files
committed
feat: plate ocean renderer
1 parent 82864dc commit 94bd5ee

22 files changed

+751
-352
lines changed

graphics/camera.ts

+16
Original file line numberDiff line numberDiff line change
@@ -12,21 +12,37 @@ export class Camera extends Transform {
1212
return this._projection;
1313
}
1414

15+
get fov(): number {
16+
return this._fov;
17+
}
18+
1519
set fov(fov: number) {
1620
this._fov = fov;
1721
this.updateProjection();
1822
}
1923

24+
get aspect(): number {
25+
return this._aspect;
26+
}
27+
2028
set aspect(aspect: number) {
2129
this._aspect = aspect;
2230
this.updateProjection();
2331
}
2432

33+
get near(): number {
34+
return this._near;
35+
}
36+
2537
set near(near: number) {
2638
this._near = near;
2739
this.updateProjection();
2840
}
2941

42+
get far(): number {
43+
return this._far;
44+
}
45+
3046
set far(far: number) {
3147
this._far = far;
3248
this.updateProjection();

graphics/grid.ts

-73
This file was deleted.

graphics/index.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
export * from './camera-controller';
22
export * from './camera';
33
export * from './transform';
4-
export * from './ocean-renderer';
5-
export { default as quad } from './quad';
4+
export * from './plate-ocean-renderer';
5+
export * from './tile-ocean-renderer';
6+
export * from './mesh';
67
export * from './gpu';
78
export * from './texture-renderer';
89
export * from './gizmo-renderer';
9-
export * from './grid';

graphics/mesh.ts

+199
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,199 @@
1+
// @ts-ignore:
2+
import { vec3 } from 'gl-matrix';
3+
4+
import { Mesh } from './gpu';
5+
6+
declare const vec3: any;
7+
8+
export const createGrid = (expansion: number = 10.0): Mesh => {
9+
const PRIMARY = [0.95, 0.95, 0.95];
10+
const SECONDARY = [0.75, 0.75, 0.75];
11+
const STEP = expansion / 2;
12+
const UINT = expansion / 10;
13+
14+
let u = 0;
15+
let vertices = [];
16+
let indices = [];
17+
18+
for (let e = 0.0; e <= expansion; e += UINT) {
19+
if (u == 0) {
20+
indices.push(indices.length);
21+
vertices.push(-expansion, 0.0, 0.0, ...PRIMARY);
22+
23+
indices.push(indices.length);
24+
vertices.push(expansion, 0.0, 0.0, ...PRIMARY);
25+
26+
indices.push(indices.length);
27+
vertices.push(0.0, 0.0, -expansion, ...PRIMARY);
28+
29+
indices.push(indices.length);
30+
vertices.push(0.0, 0.0, expansion, ...PRIMARY);
31+
} else {
32+
const color = u % STEP == 0 ? PRIMARY : SECONDARY;
33+
indices.push(indices.length);
34+
vertices.push(-expansion, 0.0, e, ...color);
35+
indices.push(indices.length);
36+
vertices.push(expansion, 0.0, e, ...color);
37+
indices.push(indices.length);
38+
vertices.push(-expansion, 0.0, -e, ...color);
39+
indices.push(indices.length);
40+
vertices.push(expansion, 0.0, -e, ...color);
41+
42+
indices.push(indices.length);
43+
vertices.push(e, 0.0, -expansion, ...color);
44+
indices.push(indices.length);
45+
vertices.push(e, 0.0, expansion, ...color);
46+
indices.push(indices.length);
47+
vertices.push(-e, 0.0, -expansion, ...color);
48+
indices.push(indices.length);
49+
vertices.push(-e, 0.0, expansion, ...color);
50+
}
51+
u++;
52+
}
53+
54+
return {
55+
vertexFormat: [
56+
{
57+
semantics: 'position',
58+
size: 3,
59+
type: WebGL2RenderingContext.FLOAT,
60+
slot: 0,
61+
offset: 0,
62+
stride: 24,
63+
},
64+
{
65+
semantics: 'color',
66+
size: 3,
67+
type: WebGL2RenderingContext.FLOAT,
68+
slot: 1,
69+
offset: 12,
70+
stride: 24,
71+
},
72+
],
73+
vertexData: Float32Array.from(vertices),
74+
indexData: Uint32Array.from(indices),
75+
};
76+
};
77+
78+
export const createQuad = (): Mesh => ({
79+
vertexFormat: [
80+
{
81+
semantics: 'position',
82+
size: 3,
83+
type: WebGL2RenderingContext.FLOAT,
84+
slot: 0,
85+
offset: 0,
86+
stride: 20,
87+
},
88+
{
89+
semantics: 'uv',
90+
size: 2,
91+
type: WebGL2RenderingContext.FLOAT,
92+
slot: 1,
93+
offset: 12,
94+
stride: 20,
95+
},
96+
],
97+
vertexData: Float32Array.from([
98+
-1, -1, 0, 0.0, 0.0, 1, -1, 0, 1.0, 0.0, 1, 1, 0, 1.0, 1.0, -1, 1, 0, 0.0,
99+
1.0,
100+
]),
101+
indexData: Uint32Array.from([0, 1, 2, 0, 2, 3]),
102+
});
103+
104+
export const createPlane = (resolution: number): Mesh => {
105+
const vertices: vec3[] = [];
106+
const indices: number[] = [];
107+
const N = resolution;
108+
const L = 1.0;
109+
const delta = L / (N - 1);
110+
const offset = vec3.fromValues(-L * 0.5, 0.0, -L * 0.5);
111+
112+
for (let i = 0; i < N - 1; i++) {
113+
for (let j = 0; j < N - 1; j++) {
114+
let v0 = vec3.fromValues(j * delta, 0.0, i * delta);
115+
vec3.add(v0, v0, offset);
116+
117+
let v1 = vec3.fromValues((j + 1) * delta, 0.0, i * delta);
118+
vec3.add(v1, v1, offset);
119+
120+
let v2 = vec3.fromValues((j + 1) * delta, 0.0, (i + 1) * delta);
121+
vec3.add(v2, v2, offset);
122+
123+
let v3 = vec3.fromValues(j * delta, 0.0, (i + 1) * delta);
124+
vec3.add(v3, v3, offset);
125+
126+
indices.push(vertices.length + 1, vertices.length, vertices.length + 2);
127+
indices.push(vertices.length + 3, vertices.length + 2, vertices.length);
128+
129+
vertices.push(v0, v1, v2, v3);
130+
}
131+
}
132+
133+
return {
134+
vertexFormat: [
135+
{
136+
semantics: 'position',
137+
size: 3,
138+
type: WebGL2RenderingContext.FLOAT,
139+
slot: 0,
140+
offset: 0,
141+
stride: 12,
142+
},
143+
],
144+
145+
vertexData: Float32Array.from(vertices.map((v) => [...v]).flat()),
146+
indexData: Uint32Array.from(indices),
147+
};
148+
};
149+
150+
export const createDisc = (
151+
rings: number,
152+
segments: number,
153+
delta: number,
154+
steep: number,
155+
offset: number
156+
): Mesh => {
157+
const vertices: vec3[] = [vec3.create()];
158+
const indices: number[] = [];
159+
const dphi = (2.0 * Math.PI) / segments;
160+
161+
let r = delta;
162+
for (let i = 0; i < rings; i++) {
163+
let phi = 0.0;
164+
for (let j = 0; j < segments; j++) {
165+
vertices.push(vec3.fromValues(Math.sin(phi) * r, 0.0, Math.cos(phi) * r));
166+
if (i < rings - 1) {
167+
const i0 = i * segments + j + 1;
168+
const i1 = (i + 1) * segments + j + 1;
169+
const i2 = (i + 1) * segments + ((j + 1) % segments) + 1;
170+
const i3 = i * segments + ((j + 1) % segments) + 1;
171+
172+
if (i === 0) {
173+
indices.push(0, i0, i3);
174+
}
175+
176+
indices.push(i0, i1, i2, i0, i2, i3);
177+
}
178+
phi += dphi;
179+
}
180+
181+
r += delta * (Math.pow(i / rings / offset, steep) + 1);
182+
}
183+
184+
return {
185+
vertexFormat: [
186+
{
187+
semantics: 'position',
188+
size: 3,
189+
type: WebGL2RenderingContext.FLOAT,
190+
slot: 0,
191+
offset: 0,
192+
stride: 12,
193+
},
194+
],
195+
196+
vertexData: Float32Array.from(vertices.map((v) => [...v]).flat()),
197+
indexData: Uint32Array.from(indices),
198+
};
199+
};

0 commit comments

Comments
 (0)