81 lines
2.3 KiB
TypeScript
81 lines
2.3 KiB
TypeScript
/** Skybox cube for rendering the sky */
|
|
export class Skybox {
|
|
private vao: WebGLVertexArrayObject | null = null;
|
|
private vbo: WebGLBuffer | null = null;
|
|
private indexCount: number = 0;
|
|
|
|
constructor() {}
|
|
|
|
initVAO(gl: WebGL2RenderingContext): void {
|
|
// Cube vertices - positions only
|
|
const vertices = new Float32Array([
|
|
// Front face
|
|
-1, -1, 1,
|
|
1, -1, 1,
|
|
1, 1, 1,
|
|
-1, 1, 1,
|
|
// Back face
|
|
-1, -1, -1,
|
|
-1, 1, -1,
|
|
1, 1, -1,
|
|
1, -1, -1,
|
|
// Top face
|
|
-1, 1, -1,
|
|
-1, 1, 1,
|
|
1, 1, 1,
|
|
1, 1, -1,
|
|
// Bottom face
|
|
-1, -1, -1,
|
|
1, -1, -1,
|
|
1, -1, 1,
|
|
-1, -1, 1,
|
|
// Right face
|
|
1, -1, -1,
|
|
1, 1, -1,
|
|
1, 1, 1,
|
|
1, -1, 1,
|
|
// Left face
|
|
-1, -1, -1,
|
|
-1, -1, 1,
|
|
-1, 1, 1,
|
|
-1, 1, -1,
|
|
]);
|
|
|
|
const indices = new Uint16Array([
|
|
0, 2, 1, 0, 3, 2, // front
|
|
4, 6, 5, 4, 7, 6, // back
|
|
8, 10, 9, 8, 11, 10, // top
|
|
12, 14, 13, 12, 15, 14, // bottom
|
|
16, 18, 17, 16, 19, 18, // right
|
|
20, 22, 21, 20, 23, 22, // left
|
|
]);
|
|
|
|
this.indexCount = indices.length;
|
|
|
|
this.vao = gl.createVertexArray();
|
|
gl.bindVertexArray(this.vao);
|
|
|
|
this.vbo = gl.createBuffer();
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, this.vbo);
|
|
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
|
|
|
|
const ibo = gl.createBuffer();
|
|
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo);
|
|
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
|
|
|
|
// Position attribute
|
|
gl.enableVertexAttribArray(0);
|
|
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
|
|
|
|
gl.bindVertexArray(null);
|
|
}
|
|
|
|
draw(gl: WebGL2RenderingContext): void {
|
|
if (!this.vao) return;
|
|
|
|
gl.bindVertexArray(this.vao);
|
|
gl.drawElements(gl.TRIANGLES, this.indexCount, gl.UNSIGNED_SHORT, 0);
|
|
gl.bindVertexArray(null);
|
|
}
|
|
}
|