306 lines
9.9 KiB
TypeScript
306 lines
9.9 KiB
TypeScript
import Size from './utils/Size';
|
|
import Texture from './Texture';
|
|
import error from './utils/error';
|
|
// @ts-ignore
|
|
import { Matrix, Vector } from 'sylvester.js';
|
|
import Program from './Program';
|
|
import Shader from './Shader';
|
|
import { makePerspective } from './utils/glUtils';
|
|
import Script from './Script';
|
|
import Canvas from './Canvas';
|
|
|
|
export default abstract class WebGLCanvas extends Canvas {
|
|
protected static vertexShaderScript: Script = Script.createFromSource('x-shader/x-vertex', `
|
|
attribute vec3 aVertexPosition;
|
|
attribute vec2 aTextureCoord;
|
|
uniform mat4 uMVMatrix;
|
|
uniform mat4 uPMatrix;
|
|
varying highp vec2 vTextureCoord;
|
|
void main(void) {
|
|
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
|
|
vTextureCoord = aTextureCoord;
|
|
}
|
|
`);
|
|
protected static fragmentShaderScript: Script = Script.createFromSource('x-shader/x-fragment', `
|
|
precision highp float;
|
|
varying highp vec2 vTextureCoord;
|
|
uniform sampler2D texture;
|
|
void main(void) {
|
|
gl_FragColor = texture2D(texture, vTextureCoord);
|
|
}
|
|
`);
|
|
public quadVPBuffer?: WebGLBuffer | null;
|
|
public quadVTCBuffer?: WebGLBuffer | null;
|
|
public mvMatrix: Matrix;
|
|
public glNames?: Record<string, string>;
|
|
public textureCoordAttribute?: number;
|
|
public vertexPositionAttribute?: number;
|
|
public perspectiveMatrix: Matrix;
|
|
protected gl?: WebGLRenderingContext | null;
|
|
protected framebuffer?: WebGLFramebuffer | null;
|
|
protected framebufferTexture?: Texture;
|
|
protected texture?: Texture;
|
|
protected program?: Program;
|
|
|
|
constructor(readonly canvas: HTMLCanvasElement, readonly size: Size, useFrameBuffer: boolean) {
|
|
super(canvas, size);
|
|
this.canvas.width = size.w;
|
|
this.canvas.height = size.h;
|
|
|
|
this.onInitWebGL();
|
|
this.onInitShaders();
|
|
this.initBuffers();
|
|
|
|
if (useFrameBuffer) {
|
|
this.initFramebuffer();
|
|
}
|
|
|
|
this.onInitTextures();
|
|
this.initScene();
|
|
}
|
|
|
|
protected initFramebuffer(): void {
|
|
const gl = this.gl;
|
|
if (!gl) {
|
|
error(`gl type is ${typeof gl}`);
|
|
return;
|
|
}
|
|
|
|
// Create framebuffer object and texture.
|
|
this.framebuffer = gl.createFramebuffer();
|
|
gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);
|
|
this.framebufferTexture = new Texture(gl, this.size, gl.RGBA);
|
|
|
|
// Create and allocate renderbuffer for depth data.
|
|
const renderbuffer = gl.createRenderbuffer();
|
|
gl.bindRenderbuffer(gl.RENDERBUFFER, renderbuffer);
|
|
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, this.size.w, this.size.h);
|
|
|
|
// Attach texture and renderbuffer to the framebuffer.
|
|
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.framebufferTexture.texture, 0);
|
|
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, renderbuffer);
|
|
}
|
|
|
|
protected initBuffers(): void {
|
|
let tmp;
|
|
const gl = this.gl;
|
|
|
|
if (!gl) {
|
|
error(`gl type is ${typeof gl}`);
|
|
return;
|
|
}
|
|
|
|
// Create vertex position buffer.
|
|
this.quadVPBuffer = gl.createBuffer();
|
|
if (!this.quadVPBuffer) {
|
|
error(`quadVPBuffer type is ${typeof gl}`);
|
|
return;
|
|
}
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, this.quadVPBuffer);
|
|
tmp = [
|
|
1.0, 1.0, 0.0,
|
|
-1.0, 1.0, 0.0,
|
|
1.0, -1.0, 0.0,
|
|
-1.0, -1.0, 0.0];
|
|
|
|
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(tmp), gl.STATIC_DRAW);
|
|
// (this.quadVPBuffer as any).itemSize = 3;
|
|
// (this.quadVPBuffer as any).numItems = 4;
|
|
|
|
/*
|
|
+--------------------+
|
|
| -1,1 (1) | 1,1 (0)
|
|
| |
|
|
| |
|
|
| |
|
|
| |
|
|
| |
|
|
| -1,-1 (3) | 1,-1 (2)
|
|
+--------------------+
|
|
*/
|
|
|
|
const scaleX = 1.0;
|
|
const scaleY = 1.0;
|
|
|
|
// Create vertex texture coordinate buffer.
|
|
this.quadVTCBuffer = gl.createBuffer();
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, this.quadVTCBuffer);
|
|
tmp = [
|
|
scaleX, 0.0,
|
|
0.0, 0.0,
|
|
scaleX, scaleY,
|
|
0.0, scaleY
|
|
];
|
|
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(tmp), gl.STATIC_DRAW);
|
|
}
|
|
|
|
protected mvIdentity() : void {
|
|
this.mvMatrix = Matrix.I(4);
|
|
}
|
|
|
|
protected mvMultiply(m: number): void {
|
|
this.mvMatrix = this.mvMatrix.x(m);
|
|
}
|
|
|
|
protected mvTranslate(m: number[]): void {
|
|
const $V = Vector.create;
|
|
this.mvMultiply(Matrix.Translation($V([m[0], m[1], m[2]])).ensure4x4());
|
|
}
|
|
|
|
protected setMatrixUniforms(): void {
|
|
if (!this.program) {
|
|
error(`Program type is ${typeof this.program}`);
|
|
return;
|
|
}
|
|
this.program.setMatrixUniform('uPMatrix', new Float32Array(this.perspectiveMatrix.flatten()));
|
|
this.program.setMatrixUniform('uMVMatrix', new Float32Array(this.mvMatrix.flatten()));
|
|
}
|
|
|
|
protected initScene(): void {
|
|
const gl = this.gl;
|
|
|
|
if (!gl) {
|
|
error(`gl type is ${typeof gl}`);
|
|
return;
|
|
}
|
|
|
|
// Establish the perspective with which we want to view the
|
|
// scene. Our field of view is 45 degrees, with a width/height
|
|
// ratio of 640:480, and we only want to see objects between 0.1 units
|
|
// and 100 units away from the camera.
|
|
|
|
this.perspectiveMatrix = makePerspective(45, 1, 0.1, 100.0);
|
|
|
|
// Set the drawing position to the 'identity' point, which is
|
|
// the center of the scene.
|
|
this.mvIdentity();
|
|
|
|
// Now move the drawing position a bit to where we want to start
|
|
// drawing the square.
|
|
this.mvTranslate([0.0, 0.0, -2.4]);
|
|
|
|
// Draw the cube by binding the array buffer to the cube's vertices
|
|
// array, setting attributes, and pushing it to GL.
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, this.quadVPBuffer as WebGLBuffer);
|
|
gl.vertexAttribPointer(this.vertexPositionAttribute as number, 3, gl.FLOAT, false, 0, 0);
|
|
|
|
// Set the texture coordinates attribute for the vertices.
|
|
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, this.quadVTCBuffer as WebGLBuffer);
|
|
gl.vertexAttribPointer(this.textureCoordAttribute as number, 2, gl.FLOAT, false, 0, 0);
|
|
|
|
this.onInitSceneTextures();
|
|
|
|
this.setMatrixUniforms();
|
|
|
|
if (this.framebuffer) {
|
|
console.log('Bound Frame Buffer');
|
|
gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);
|
|
}
|
|
}
|
|
|
|
public toString(): string {
|
|
return 'WebGLCanvas Size: ' + this.size;
|
|
}
|
|
|
|
protected checkLastError(operation: string): void {
|
|
if (!this.gl || !this.glNames) {
|
|
return;
|
|
}
|
|
const err = this.gl.getError();
|
|
if (err !== this.gl.NO_ERROR) {
|
|
let name = this.glNames[err];
|
|
name = (name !== undefined) ? name + '(' + err + ')' :
|
|
('Unknown WebGL ENUM (0x' + err.toString(16) + ')');
|
|
if (operation) {
|
|
console.log('WebGL Error: %s, %s', operation, name);
|
|
} else {
|
|
console.log('WebGL Error: %s', name);
|
|
}
|
|
console.trace();
|
|
}
|
|
}
|
|
|
|
protected onInitWebGL(): void {
|
|
try {
|
|
this.gl = this.canvas.getContext('experimental-webgl', {
|
|
preserveDrawingBuffer: true
|
|
}) as WebGLRenderingContext;
|
|
} catch (e: any) {
|
|
}
|
|
|
|
if (!this.gl) {
|
|
error('Unable to initialize WebGL. Your browser may not support it.');
|
|
return;
|
|
}
|
|
if (this.glNames) {
|
|
return;
|
|
}
|
|
this.glNames = {};
|
|
for (const propertyName in this.gl) {
|
|
if (this.gl.hasOwnProperty(propertyName)) {
|
|
const value = (this.gl as unknown as Record<string, number>)[propertyName];
|
|
if (typeof value === 'number') {
|
|
this.glNames[value] = propertyName;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
protected onInitShaders(): void {
|
|
const gl = this.gl;
|
|
if (!gl) {
|
|
error(`gl type is ${typeof gl}`);
|
|
return;
|
|
}
|
|
this.program = new Program(gl);
|
|
this.program.attach(new Shader(gl, WebGLCanvas.vertexShaderScript));
|
|
this.program.attach(new Shader(gl, WebGLCanvas.fragmentShaderScript));
|
|
this.program.link();
|
|
this.program.use();
|
|
this.vertexPositionAttribute = this.program.getAttributeLocation('aVertexPosition');
|
|
gl.enableVertexAttribArray(this.vertexPositionAttribute as number);
|
|
this.textureCoordAttribute = this.program.getAttributeLocation('aTextureCoord');
|
|
gl.enableVertexAttribArray(this.textureCoordAttribute as number);
|
|
}
|
|
|
|
protected onInitTextures(): void {
|
|
const gl = this.gl;
|
|
if (!gl) {
|
|
error(`gl type is ${typeof gl}`);
|
|
return;
|
|
}
|
|
this.texture = new Texture(gl, this.size, gl.RGBA);
|
|
}
|
|
|
|
protected onInitSceneTextures(): void {
|
|
if (!this.texture) {
|
|
error(`texture type is ${typeof this.texture}`);
|
|
return;
|
|
}
|
|
if (!this.program) {
|
|
error(`program type is ${typeof this.texture}`);
|
|
return;
|
|
}
|
|
this.texture.bind(0, this.program, 'texture');
|
|
}
|
|
|
|
protected drawScene(): void {
|
|
const gl = this.gl;
|
|
if (!gl) {
|
|
error(`gl type is ${typeof gl}`);
|
|
return;
|
|
}
|
|
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
|
}
|
|
|
|
protected readPixels(buffer: Uint8Array): void {
|
|
const gl = this.gl;
|
|
if (!gl) {
|
|
error(`gl type is ${typeof gl}`);
|
|
return;
|
|
}
|
|
gl.readPixels(0, 0, this.size.w, this.size.h, gl.RGBA, gl.UNSIGNED_BYTE, buffer);
|
|
}
|
|
}
|