Code structuring
Also, use a fixed-size canvas for now.
This commit is contained in:
parent
4a67ba6830
commit
a5e69edc5a
GPG key ID:
16EF3F64CB201D9C
7 changed files with 181 additions and 144 deletions
6
dist/index.html
vendored
6
dist/index.html
vendored
|
|
@ -9,8 +9,8 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
canvas {
|
body {
|
||||||
position: absolute;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
|
|
@ -21,7 +21,7 @@
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<canvas id="rpgedit"></canvas>
|
<canvas id="rpgedit" width="1024" height="768"></canvas>
|
||||||
<script src="bundle.js"></script>
|
<script src="bundle.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
attribute vec3 aVertexPosition;
|
|
||||||
|
|
||||||
uniform mat4 uVMatrix;
|
|
||||||
uniform mat4 uPMatrix;
|
|
||||||
|
|
||||||
void main(void) {
|
|
||||||
gl_Position = uPMatrix * uVMatrix * vec4(aVertexPosition, 1.0);
|
|
||||||
}
|
|
||||||
138
src/index.ts
138
src/index.ts
|
|
@ -1,141 +1,13 @@
|
||||||
import {mat4} from 'gl-matrix';
|
import Renderer from './view/Renderer';
|
||||||
|
import Scene from './view/Scene';
|
||||||
|
|
||||||
|
|
||||||
(() => {
|
(() => {
|
||||||
const body = document.getElementsByTagName('body')[0];
|
|
||||||
|
|
||||||
const canvas = document.getElementById('rpgedit') as HTMLCanvasElement;
|
const canvas = document.getElementById('rpgedit') as HTMLCanvasElement;
|
||||||
if (!canvas)
|
if (!canvas)
|
||||||
return;
|
return;
|
||||||
|
|
||||||
const gl = canvas.getContext('webgl') as WebGLRenderingContext;
|
const renderer = new Renderer(canvas);
|
||||||
if (!gl)
|
const scene = new Scene(renderer);
|
||||||
return;
|
scene.draw();
|
||||||
|
|
||||||
gl.clearColor(0.0, 0.0, 0.0, 1.0);
|
|
||||||
gl.enable(gl.DEPTH_TEST);
|
|
||||||
|
|
||||||
|
|
||||||
function compileShader(type: number, src: string): WebGLShader|null {
|
|
||||||
let shader = gl.createShader(type);
|
|
||||||
if (!shader) {
|
|
||||||
console.error('Unable to create shader');
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
gl.shaderSource(shader, src);
|
|
||||||
gl.compileShader(shader);
|
|
||||||
|
|
||||||
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
||||||
console.error('Unable to compile shader');
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return shader;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
let shaderVertexPositionAttribute: number;
|
|
||||||
let shaderPMatrixUniform: WebGLUniformLocation|null;
|
|
||||||
let shaderVMatrixUniform: WebGLUniformLocation|null;
|
|
||||||
|
|
||||||
function initShaders(): void {
|
|
||||||
let shaderProgram = gl.createProgram();
|
|
||||||
|
|
||||||
let vertexShader = compileShader(gl.VERTEX_SHADER, require('./default.vs'));
|
|
||||||
|
|
||||||
let fragmentShaderSrc = require('./default.fs');
|
|
||||||
let fragmentShader = compileShader(gl.FRAGMENT_SHADER, require('./default.fs'));
|
|
||||||
|
|
||||||
if (!vertexShader || !fragmentShader)
|
|
||||||
return;
|
|
||||||
|
|
||||||
gl.attachShader(shaderProgram, vertexShader);
|
|
||||||
gl.attachShader(shaderProgram, fragmentShader);
|
|
||||||
|
|
||||||
gl.linkProgram(shaderProgram);
|
|
||||||
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
|
|
||||||
console.error('Unable to link shader');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
gl.useProgram(shaderProgram);
|
|
||||||
|
|
||||||
shaderVertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
|
|
||||||
gl.enableVertexAttribArray(shaderVertexPositionAttribute);
|
|
||||||
|
|
||||||
shaderPMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
|
|
||||||
shaderVMatrixUniform = gl.getUniformLocation(shaderProgram, "uVMatrix");
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
const triangleVertexPositionBuffer = gl.createBuffer();
|
|
||||||
const squareVertexPositionBuffer = gl.createBuffer();
|
|
||||||
|
|
||||||
function initScene(): void {
|
|
||||||
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
|
|
||||||
const triangleVertices = [
|
|
||||||
0.0, 1.0, 0.0,
|
|
||||||
-1.0, -1.0, 0.0,
|
|
||||||
1.0, -1.0, 0.0
|
|
||||||
];
|
|
||||||
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);
|
|
||||||
|
|
||||||
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
|
|
||||||
const squareVertices = [
|
|
||||||
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(squareVertices), gl.STATIC_DRAW);
|
|
||||||
}
|
|
||||||
|
|
||||||
initShaders();
|
|
||||||
initScene();
|
|
||||||
|
|
||||||
const pMatrix = mat4.create();
|
|
||||||
const vMatrix = mat4.create();
|
|
||||||
|
|
||||||
function drawScene(): void {
|
|
||||||
if (!shaderPMatrixUniform || !shaderVMatrixUniform)
|
|
||||||
return;
|
|
||||||
|
|
||||||
let width = canvas.width, height = canvas.height
|
|
||||||
|
|
||||||
gl.viewport(0, 0, width, height);
|
|
||||||
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
|
||||||
|
|
||||||
mat4.perspective(pMatrix, 45, width / height, 0.1, 100.0);
|
|
||||||
gl.uniformMatrix4fv(shaderPMatrixUniform, false, pMatrix);
|
|
||||||
|
|
||||||
mat4.identity(vMatrix);
|
|
||||||
mat4.translate(vMatrix, vMatrix, [-1.5, 0.0, -7.0]);
|
|
||||||
gl.uniformMatrix4fv(shaderVMatrixUniform, false, vMatrix);
|
|
||||||
|
|
||||||
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
|
|
||||||
gl.vertexAttribPointer(shaderVertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
|
|
||||||
gl.drawArrays(gl.TRIANGLES, 0, 3);
|
|
||||||
|
|
||||||
mat4.translate(vMatrix, vMatrix, [3.0, 0.0, 0.0]);
|
|
||||||
gl.uniformMatrix4fv(shaderVMatrixUniform, false, vMatrix);
|
|
||||||
|
|
||||||
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
|
|
||||||
gl.vertexAttribPointer(shaderVertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
|
|
||||||
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
|
||||||
}
|
|
||||||
|
|
||||||
function setSize(): void {
|
|
||||||
var e = document.documentElement;
|
|
||||||
var w = window.innerWidth || e.clientWidth || body.clientWidth;
|
|
||||||
var h = window.innerHeight || e.clientHeight || body.clientHeight;
|
|
||||||
|
|
||||||
canvas.width = w;
|
|
||||||
canvas.height = h;
|
|
||||||
|
|
||||||
drawScene()
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('resize', () => setSize());
|
|
||||||
setSize();
|
|
||||||
})();
|
})();
|
||||||
|
|
|
||||||
124
src/view/Renderer.ts
Normal file
124
src/view/Renderer.ts
Normal file
|
|
@ -0,0 +1,124 @@
|
||||||
|
import {mat4} from 'gl-matrix';
|
||||||
|
|
||||||
|
|
||||||
|
class Renderer {
|
||||||
|
public gl: WebGLRenderingContext;
|
||||||
|
|
||||||
|
public vertexPosLoc: number;
|
||||||
|
private viewportLoc: WebGLUniformLocation;
|
||||||
|
private translateLoc: WebGLUniformLocation;
|
||||||
|
|
||||||
|
private viewport: mat4 = mat4.create();
|
||||||
|
private translate: mat4 = mat4.create();
|
||||||
|
|
||||||
|
private mkContext(): WebGLRenderingContext {
|
||||||
|
let gl = (this.canvas.getContext('webgl') || this.canvas.getContext('experimental-webgl')) as WebGLRenderingContext|null;
|
||||||
|
if (!gl)
|
||||||
|
throw new Error('unable to initialize WebGL context');
|
||||||
|
|
||||||
|
return gl;
|
||||||
|
}
|
||||||
|
|
||||||
|
getAttribLocation(program: WebGLProgram, name: string): number {
|
||||||
|
let ret = this.gl.getAttribLocation(program, name);
|
||||||
|
if (ret < 0)
|
||||||
|
throw new Error('unable to get location of attribute \'' + name + '\'');
|
||||||
|
|
||||||
|
return ret;
|
||||||
|
}
|
||||||
|
|
||||||
|
getUniformLocation(program: WebGLProgram, name: string): WebGLUniformLocation {
|
||||||
|
let ret = this.gl.getUniformLocation(program, name);
|
||||||
|
if (!ret)
|
||||||
|
throw new Error('unable to get location of uniform \'' + name + '\'');
|
||||||
|
|
||||||
|
return ret;
|
||||||
|
}
|
||||||
|
|
||||||
|
createBuffer(): WebGLBuffer {
|
||||||
|
let ret = this.gl.createBuffer();
|
||||||
|
if (!ret)
|
||||||
|
throw new Error('unable to create buffer');
|
||||||
|
|
||||||
|
return ret;
|
||||||
|
}
|
||||||
|
|
||||||
|
compileShader(type: number, src: string): WebGLShader {
|
||||||
|
let shader = this.gl.createShader(type);
|
||||||
|
if (!shader) {
|
||||||
|
throw new Error('Unable to create shader');
|
||||||
|
}
|
||||||
|
|
||||||
|
this.gl.shaderSource(shader, src);
|
||||||
|
this.gl.compileShader(shader);
|
||||||
|
|
||||||
|
if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
|
||||||
|
let err = this.gl.getShaderInfoLog(shader);
|
||||||
|
this.gl.deleteShader(shader);
|
||||||
|
throw new Error('Unable to compile shader: ' + err);
|
||||||
|
}
|
||||||
|
|
||||||
|
return shader;
|
||||||
|
}
|
||||||
|
|
||||||
|
private initShaders(): void {
|
||||||
|
let shaderProgram = this.gl.createProgram();
|
||||||
|
if (!shaderProgram) {
|
||||||
|
throw new Error('Unable to create shader program');
|
||||||
|
}
|
||||||
|
|
||||||
|
let vertexShader = this.compileShader(this.gl.VERTEX_SHADER, require('./default.vs'));
|
||||||
|
let fragmentShader = this.compileShader(this.gl.FRAGMENT_SHADER, require('./default.fs'));
|
||||||
|
|
||||||
|
|
||||||
|
this.gl.attachShader(shaderProgram, vertexShader);
|
||||||
|
this.gl.attachShader(shaderProgram, fragmentShader);
|
||||||
|
|
||||||
|
this.gl.linkProgram(shaderProgram);
|
||||||
|
if (!this.gl.getProgramParameter(shaderProgram, this.gl.LINK_STATUS)) {
|
||||||
|
let err = this.gl.getProgramInfoLog(shaderProgram);
|
||||||
|
|
||||||
|
this.gl.deleteShader(vertexShader);
|
||||||
|
this.gl.deleteShader(fragmentShader);
|
||||||
|
this.gl.deleteProgram(shaderProgram);
|
||||||
|
|
||||||
|
throw new Error('Unable to link shader: ' + err);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.gl.useProgram(shaderProgram);
|
||||||
|
|
||||||
|
this.vertexPosLoc = this.getAttribLocation(shaderProgram, 'vertexPos');
|
||||||
|
this.gl.enableVertexAttribArray(this.vertexPosLoc);
|
||||||
|
|
||||||
|
this.viewportLoc = this.getUniformLocation(shaderProgram, 'viewport');
|
||||||
|
this.translateLoc = this.getUniformLocation(shaderProgram, 'translate');
|
||||||
|
}
|
||||||
|
|
||||||
|
private setSize(): void {
|
||||||
|
let w = this.canvas.width;
|
||||||
|
let h = this.canvas.height;
|
||||||
|
|
||||||
|
this.gl.viewport(0, 0, w, h);
|
||||||
|
this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
|
||||||
|
|
||||||
|
mat4.identity(this.viewport);
|
||||||
|
mat4.scale(this.viewport, this.viewport, [64 / w, 64 / h, 1.0]);
|
||||||
|
this.gl.uniformMatrix4fv(this.viewportLoc, false, this.viewport);
|
||||||
|
|
||||||
|
mat4.identity(this.translate);
|
||||||
|
this.gl.uniformMatrix4fv(this.translateLoc, false, this.translate);
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor(private canvas: HTMLCanvasElement) {
|
||||||
|
this.gl = this.mkContext();
|
||||||
|
|
||||||
|
this.initShaders();
|
||||||
|
|
||||||
|
this.gl.clearColor(0.0, 0.0, 0.0, 1.0);
|
||||||
|
this.gl.enable(this.gl.DEPTH_TEST);
|
||||||
|
|
||||||
|
this.setSize();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Renderer;
|
||||||
41
src/view/Scene.ts
Normal file
41
src/view/Scene.ts
Normal file
|
|
@ -0,0 +1,41 @@
|
||||||
|
import Renderer from './Renderer';
|
||||||
|
|
||||||
|
class Scene {
|
||||||
|
private triangleVertexPositionBuffer: WebGLBuffer;
|
||||||
|
private squareVertexPositionBuffer: WebGLBuffer;
|
||||||
|
|
||||||
|
constructor(private r: Renderer) {
|
||||||
|
this.triangleVertexPositionBuffer = r.createBuffer();
|
||||||
|
r.gl.bindBuffer(r.gl.ARRAY_BUFFER, this.triangleVertexPositionBuffer);
|
||||||
|
const triangleVertices = [
|
||||||
|
-1.5, 1.0,
|
||||||
|
-2.5, -1.0,
|
||||||
|
-0.5, -1.0,
|
||||||
|
];
|
||||||
|
r.gl.bufferData(r.gl.ARRAY_BUFFER, new Float32Array(triangleVertices), r.gl.STATIC_DRAW);
|
||||||
|
|
||||||
|
this.squareVertexPositionBuffer = r.createBuffer();
|
||||||
|
r.gl.bindBuffer(r.gl.ARRAY_BUFFER, this.squareVertexPositionBuffer);
|
||||||
|
const squareVertices = [
|
||||||
|
2.5, 1.0,
|
||||||
|
0.5, 1.0,
|
||||||
|
2.5, -1.0,
|
||||||
|
0.5, -1.0,
|
||||||
|
];
|
||||||
|
r.gl.bufferData(r.gl.ARRAY_BUFFER, new Float32Array(squareVertices), r.gl.STATIC_DRAW);
|
||||||
|
}
|
||||||
|
|
||||||
|
draw(): void {
|
||||||
|
this.r.gl.clear(this.r.gl.COLOR_BUFFER_BIT | this.r.gl.DEPTH_BUFFER_BIT);
|
||||||
|
|
||||||
|
this.r.gl.bindBuffer(this.r.gl.ARRAY_BUFFER, this.triangleVertexPositionBuffer);
|
||||||
|
this.r.gl.vertexAttribPointer(this.r.vertexPosLoc, 2, this.r.gl.FLOAT, false, 0, 0);
|
||||||
|
this.r.gl.drawArrays(this.r.gl.TRIANGLES, 0, 3);
|
||||||
|
|
||||||
|
this.r.gl.bindBuffer(this.r.gl.ARRAY_BUFFER, this.squareVertexPositionBuffer);
|
||||||
|
this.r.gl.vertexAttribPointer(this.r.vertexPosLoc, 2, this.r.gl.FLOAT, false, 0, 0);
|
||||||
|
this.r.gl.drawArrays(this.r.gl.TRIANGLE_STRIP, 0, 4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Scene;
|
||||||
8
src/view/default.vs
Normal file
8
src/view/default.vs
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
attribute vec2 vertexPos;
|
||||||
|
|
||||||
|
uniform mat4 viewport;
|
||||||
|
uniform mat4 translate;
|
||||||
|
|
||||||
|
void main(void) {
|
||||||
|
gl_Position = viewport * translate * vec4(vertexPos, 0.0, 1.0);
|
||||||
|
}
|
||||||
Reference in a new issue