summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/default.fs3
-rw-r--r--src/default.vs8
-rw-r--r--src/index.ts141
3 files changed, 152 insertions, 0 deletions
diff --git a/src/default.fs b/src/default.fs
new file mode 100644
index 0000000..7a085b6
--- /dev/null
+++ b/src/default.fs
@@ -0,0 +1,3 @@
+void main(void) {
+ gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+}
diff --git a/src/default.vs b/src/default.vs
new file mode 100644
index 0000000..457a528
--- /dev/null
+++ b/src/default.vs
@@ -0,0 +1,8 @@
+attribute vec3 aVertexPosition;
+
+uniform mat4 uVMatrix;
+uniform mat4 uPMatrix;
+
+void main(void) {
+ gl_Position = uPMatrix * uVMatrix * vec4(aVertexPosition, 1.0);
+}
diff --git a/src/index.ts b/src/index.ts
new file mode 100644
index 0000000..8a5a067
--- /dev/null
+++ b/src/index.ts
@@ -0,0 +1,141 @@
+import {mat4} from 'gl-matrix';
+
+
+(() => {
+ const body = document.getElementsByTagName('body')[0];
+
+ const canvas = document.getElementById('rpgedit') as HTMLCanvasElement;
+ if (!canvas)
+ return;
+
+ const gl = canvas.getContext('webgl') as WebGLRenderingContext;
+ if (!gl)
+ return;
+
+ 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();
+})();