Содержание блога
Скачать исходники: hello-planckjs-webgl10-ts.zip (4.8 Кб)
Исходники на GitHub: hello-planckjs-webgl10-ts
Установите глобально следующие пакеты:
- npm i typescript -g
- npm i browserify -g
- npm i uglify-js -g
Установите пакеты из `package.json` командой: npm install
Раскомментируйте/Закомментируйте Debug/Release в файлах `index.html` и `main.ts` (см. комментарии в этих файлах).
Используйте следующие комманды для сборки:
- `npm run debug` - для отладки в редакторах кода и для публикации в песочницах, например, в Plunker: Hello Planck.js. WebGL 1.0, TypeScript
- `npm run release` - для сборки в `bundle.min.js` для production
package.json
| JSON | 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| {
"name": "hello-planckjs-webgl10-ts",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"debug": "tsc -p tsconfigs/tsconfig.debug.json",
"compile": "tsc -p tsconfigs/tsconfig.release.json",
"bundle": "browserify public/js/main.js -o public/js/bundle.js",
"minify": "uglifyjs public/js/bundle.js -o public/js/bundle.min.js",
"release": "npm run compile && npm run bundle && npm run minify"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"gl-matrix": "^3.3.0",
"planck-js": "^0.3.23",
"requirejs": "^2.3.6"
},
"devDependencies": {
"@types/requirejs": "^2.1.32"
}
} |
|
public/index.html
| PHP/HTML | 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello Planck. WebGL 1.0, TypeScript</title>
<!-- Debug -->
<script data-main="js/RequireConfig"
src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
<!-- Release -->
<!-- <script src="js/bundle.min.js"></script> -->
</head>
<body>
<canvas id="renderCanvas" width="300" height="150"></canvas>
<div id="output"></div>
<a href="https://github.com/8Observer8/hello-planckjs-webgl10-ts">Source Code on GitHub</a>
<br>
<a href="https://plnkr.co/edit/MyJOyvRtIDAhpKA5?preview">Playground</a>
</body>
</html> |
|
src/client/main.ts
| Javascript | 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| import { mat4 } from "gl-matrix";
import { Vec2 } from "planck-js";
let gl: WebGLRenderingContext;
let output: HTMLDivElement;
function init()
{
const canvas = document.getElementById("renderCanvas") as HTMLCanvasElement;
gl = canvas.getContext("webgl");
gl.clearColor(0.2, 0.2, 0.2, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
output = document.getElementById("output") as HTMLDivElement;
const vec = Vec2(1, 2);
output.innerHTML = `vec = (${vec.x}, ${vec.y})<br>`;
const matrix = mat4.create();
output.innerHTML += `matrix = [${matrix}]`;
}
function main()
{
init();
}
// Debug
main();
// Release
// window.onload = () => main(); |
|
src/client/RequireConfig.ts
| Javascript | 1
2
3
4
5
6
7
8
9
| requirejs.config({
baseUrl: "js",
paths: {
"gl-matrix": "https://cdn.jsdelivr.net/npm/gl-matrix@3.3.0/gl-matrix-min",
"planck-js": "https://cdn.jsdelivr.net/npm/planck-js@0.3.23/dist/planck.min"
}
});
requirejs(["main"], () => { }); |
|
tsconfigs/tsconfig.json
| JSON | 1
2
3
4
5
6
7
8
9
| {
"compilerOptions": {
"target": "ES5",
"outDir": "../public/js"
},
"include": [
"../src/client/**/*.ts"
]
} |
|
tsconfigs/tsconfig.debug.json
| JSON | 1
2
3
4
5
6
7
8
9
10
11
12
13
| {
"extends": "./tsconfig.json",
"compilerOptions": {
"module": "AMD",
"sourceMap": true,
"types": [
"requirejs",
"gl-matrix",
"planck-js"
],
"moduleResolution": "node"
}
} |
|
tsconfigs/tsconfig.release.json
| JSON | 1
2
3
4
5
6
7
8
9
10
11
12
13
| {
"extends": "./tsconfig.json",
"compilerOptions": {
"module": "CommonJS",
"sourceMap": false,
"types": [
"node"
]
},
"exclude": [
"../src/client/RequireConfig.ts"
]
} |
|
|
