scene/Axes.tstypescript
import { ShaderProgram } from "../webgl/ShaderProgram";
import { Scene } from "./Scene";
import type { WebGLBufferExt } from "../webgl/Handler";
class Axes extends Scene {
public size: number;
public axesBuffer: WebGLBufferExt | null;
public axesColorBuffer: WebGLBufferExt | null;
constructor(size: number = 100) {
super("Axes");
this.size = size;
this.axesBuffer = null;
this.axesColorBuffer = null;
}
public override init() {
this.createAxesBuffer(this.size);
this.drawMode = this.renderer!.handler.gl!.LINES;
this.renderer!.handler.addProgram(
new ShaderProgram("axesShader", {
uniforms: {
projectionViewMatrix: "mat4"
},
attributes: {
aVertexPosition: "vec3",
aVertexColor: "vec4"
},
vertexShader: `attribute vec3 aVertexPosition;
attribute vec4 aVertexColor;
uniform mat4 projectionViewMatrix;
varying vec4 vColor;
void main(void) {
gl_Position = projectionViewMatrix * vec4(aVertexPosition, 1.0);
vColor = aVertexColor;
}`,
fragmentShader: `precision highp float;
varying vec4 vColor;
void main(void) {
gl_FragColor = vColor;
}`
})
);
this.renderer?.events.on("forwardpass", this.forward);
}
public override onremove() {
this.renderer?.events.off("forwardpass", this.forward);
}
public forward = () => {
this.renderer!.handler.programs.axesShader.activate().set({
projectionViewMatrix: this.renderer!.activeCamera!.getProjectionViewMatrix(),
aVertexPosition: this.axesBuffer,
aVertexColor: this.axesColorBuffer
});
this.renderer!.handler.programs.axesShader.drawArrays(this.drawMode, this.axesBuffer!.numItems);
};
public createAxesBuffer(gridSize: number) {
const vertices = [
0.0,
0.0,
0.0,
gridSize - 1,
0.0,
0.0, // x - R
0.0,
0.0,
0.0,
0.0,
gridSize - 1,
0.0, // y - B
0.0,
0.0,
0.0,
0.0,
0.0,
gridSize - 1 // z - G
];
const colors = [
1.0,
0.0,
0.0,
1.0,
1.0,
0.0,
0.0,
1.0, // x - R
0.0,
0.0,
1.0,
1.0,
0.0,
0.0,
1.0,
1.0, // y - B
0.0,
1.0,
0.0,
1.0,
0.0,
1.0,
0.0,
1.0 // z - G
];
this.axesBuffer = this.renderer!.handler.createArrayBuffer(new Float32Array(vertices), 3, 6);
this.axesColorBuffer = this.renderer!.handler.createArrayBuffer(new Float32Array(colors), 4, 6);
}
}
export { Axes };