neocturne/rpgedit
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Initial setup (Webpack, TypeScript, WebGL)

Browse source
This commit is contained in:
Matthias Schiffer 2017-09-09 02:52:01 +02:00
commit a47638aab5
Signed by: neocturne
GPG key ID: 16EF3F64CB201D9C
10 changed files with 3880 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored Normal file
View file

@ -0,0 +1,2 @@
/node_modules
/dist/bundle.js

1
custom.d.ts vendored Normal file
View file

@ -0,0 +1 @@
declare function require(name: string): string;

27
dist/index.html vendored Normal file
View 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
View file

File diff suppressed because it is too large Load diff

19
package.json Normal file
View 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
View 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
View 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
View 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
View 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
View 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')
},
};