diff --git a/.gitignore b/.gitignore
index d15a641df7119e69a3a736a3480fcac35df8ecec..615776276627c3445513db121e5a050df0bde3c9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,4 +4,6 @@ node_modules/
debug.log
npm-debug.log
-*.sublime-workspace
\ No newline at end of file
+*.sublime-workspace
+
+web/render-test/index.js
\ No newline at end of file
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
index b3225a1f2aa3536b48e7f68f44220d42958af6eb..c59f2cf6c7d1f739351734f9e300c144ced9e9c9 100644
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@@ -9,6 +9,11 @@
"problemMatcher": [
"$tsc"
]
+ },
+ {
+ "type": "npm",
+ "script": "app-render-test",
+ "problemMatcher": []
}
]
}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 8accbb5e8342dc83b43ce2b2d221725c385dfff8..df4d12aac59e87d7c5b3d2ca578886a074b52f2e 100644
Binary files a/package-lock.json and b/package-lock.json differ
diff --git a/package.json b/package.json
index 2a5a30992925b711e3321b6a3b9683a5fe54fbd3..6329b7aac9ebdd98d7744b76e297454dee65fd6b 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,8 @@
"build": "tsc",
"watch": "tsc -watch",
"test": "jest",
- "script": "node build/node_modules/script.js"
+ "script": "node build/node_modules/script.js",
+ "app-render-test": "webpack build/node_modules/apps/render-test/index.js --mode development -o web/render-test/index.js"
},
"jest": {
"moduleFileExtensions": [
@@ -64,7 +65,9 @@
"tslint": "^5.9.1",
"typescript": "^2.7.2",
"uglify-js": "^3.3.12",
- "util.promisify": "^1.0.0"
+ "util.promisify": "^1.0.0",
+ "webpack": "^4.2.0",
+ "webpack-cli": "^2.0.13"
},
"dependencies": {
"argparse": "^1.0.10",
diff --git a/src/apps/render-test/index.tsx b/src/apps/render-test/index.tsx
index 2647621e8127891712acd5889ca58517410ebbb1..246502b305987115ab9d1930e4e73ecc42ea8876 100644
--- a/src/apps/render-test/index.tsx
+++ b/src/apps/render-test/index.tsx
@@ -5,7 +5,9 @@
*/
import UI from './ui'
+import State from './state'
import * as React from 'react'
import * as ReactDOM from 'react-dom'
-ReactDOM.render(<UI/>, document.getElementById('app'));
\ No newline at end of file
+const state = new State()
+ReactDOM.render(<UI state={state} />, document.getElementById('app'));
\ No newline at end of file
diff --git a/src/apps/render-test/state.ts b/src/apps/render-test/state.ts
new file mode 100644
index 0000000000000000000000000000000000000000..36f9c6192595e096e324d281081b18b43b5771ac
--- /dev/null
+++ b/src/apps/render-test/state.ts
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import REGL = require('regl');
+import * as glContext from 'mol-gl/context'
+import { Camera } from 'mol-gl/camera'
+import { Vec3 } from 'mol-math/linear-algebra'
+
+export default class State {
+ regl: REGL.Regl
+
+ initRegl (container: HTMLDivElement) {
+ const regl = glContext.create({
+ container,
+ extensions: [
+ 'OES_texture_float',
+ 'OES_texture_float_linear',
+ // 'ext_disjoint_timer_query',
+ 'EXT_blend_minmax'
+ ],
+ // profile: true
+ })
+
+ const camera = Camera.create(regl, container, {
+ center: Vec3.create(0, 0, 0)
+ })
+
+ const drawTriangle = regl({
+ frag: `
+ void main() {
+ gl_FragColor = vec4(1, 0, 0, 1);
+ }`,
+
+ vert: `
+ precision mediump float;
+ uniform mat4 projection, view;
+ attribute vec3 position;
+ void main () {
+ gl_Position = projection * view * vec4(position, 1.0);
+ }`,
+
+ attributes: {
+ position: [[0, -1, 0], [-1, 0, 0], [1, 1, 0]]
+ },
+
+ count: 3
+ })
+
+ regl.frame(() => {
+ camera.update((state: any) => {
+ if (!camera.isDirty()) return
+ console.log(state, camera)
+ regl.clear({color: [0, 0, 0, 1]})
+ drawTriangle()
+ }, undefined)
+ })
+
+ this.regl = regl
+ }
+
+ constructor() {
+
+ }
+}
diff --git a/src/apps/render-test/ui.tsx b/src/apps/render-test/ui.tsx
index 09f3215c8a36cdb0410af0796eb548381708699b..fd88f2f5f1473ab7ef998391be930a4e89ad6a03 100644
--- a/src/apps/render-test/ui.tsx
+++ b/src/apps/render-test/ui.tsx
@@ -5,11 +5,18 @@
*/
import * as React from 'react'
+import State from './state'
+
+export default class Root extends React.Component<{ state: State }, { }> {
+ private canvasContainer: HTMLDivElement | null = null;
+
+ componentDidMount() {
+ if (this.canvasContainer) this.props.state.initRegl(this.canvasContainer)
+ }
-export default class Root extends React.Component {
render() {
- return <div style={{ position: 'absolute', top: 0, right: 0, left: 0, bottom: 0, overflow: 'hidden' }}>
-
+ return <div ref={elm => this.canvasContainer = elm} style={{ position: 'absolute', top: 0, right: 0, left: 0, bottom: 0, overflow: 'hidden' }}>
+
</div>
}
}
\ No newline at end of file
diff --git a/web/render-test/index.html b/web/render-test/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..2e144b29791e36ed9926e7d0785e4ffae563cc7d
--- /dev/null
+++ b/web/render-test/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1" />
+ <title>Mol* Render Test</title>
+ </head>
+ <body>
+ <div id="app"></div>
+ <script src="./index.js"></script>
+ </body>
+</html>
\ No newline at end of file