Initial setup (Webpack, TypeScript, WebGL)
This commit is contained in:
commit
a47638aab5
GPG key ID:
16EF3F64CB201D9C
10 changed files with 3880 additions and 0 deletions
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
/node_modules
|
||||
/dist/bundle.js
|
||||
1
custom.d.ts
vendored
Normal file
1
custom.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
declare function require(name: string): string;
|
||||
27
dist/index.html
vendored
Normal file
27
dist/index.html
vendored
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>RPGedit</title>
|
||||
<style type="text/css">
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
border: 0px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="rpgedit"></canvas>
|
||||
<script src="bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
3638
package-lock.json
generated
Normal file
3638
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
19
package.json
Normal file
19
package.json
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "webpack-dev-server",
|
||||
"build": "webpack"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/gl-matrix": "^2.3.0",
|
||||
"raw-loader": "^0.5.1",
|
||||
"ts-loader": "^2.3.6",
|
||||
"typescript": "^2.5.2",
|
||||
"uglifyjs-webpack-plugin": "^0.4.6",
|
||||
"webpack": "^3.5.6",
|
||||
"webpack-dev-server": "^2.7.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"gl-matrix": "^2.4.0"
|
||||
}
|
||||
}
|
||||
3
src/default.fs
Normal file
3
src/default.fs
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
void main(void) {
|
||||
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
|
||||
}
|
||||
8
src/default.vs
Normal file
8
src/default.vs
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
attribute vec3 aVertexPosition;
|
||||
|
||||
uniform mat4 uVMatrix;
|
||||
uniform mat4 uPMatrix;
|
||||
|
||||
void main(void) {
|
||||
gl_Position = uPMatrix * uVMatrix * vec4(aVertexPosition, 1.0);
|
||||
}
|
||||
141
src/index.ts
Normal file
141
src/index.ts
Normal file
|
|
@ -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();
|
||||
})();
|
||||
10
tsconfig.json
Normal file
10
tsconfig.json
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"outDir": "./dist/",
|
||||
"sourceMap": true,
|
||||
"module": "commonjs",
|
||||
"target": "es5",
|
||||
"lib": [ "es2015", "dom" ],
|
||||
"strict": true
|
||||
}
|
||||
}
|
||||
31
webpack.config.js
Normal file
31
webpack.config.js
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
const path = require('path');
|
||||
|
||||
module.exports = {
|
||||
entry: './src/index.ts',
|
||||
devtool: 'inline-source-map',
|
||||
devServer: {
|
||||
contentBase: './dist'
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.ts$/,
|
||||
use: 'ts-loader',
|
||||
exclude: /node_modules/
|
||||
},
|
||||
{
|
||||
test: /\.(vs|fs)$/,
|
||||
use: [
|
||||
'raw-loader'
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
resolve: {
|
||||
extensions: [ ".ts", ".js" ]
|
||||
},
|
||||
output: {
|
||||
filename: 'bundle.js',
|
||||
path: path.resolve(__dirname, 'dist')
|
||||
},
|
||||
};
|
||||
Reference in a new issue