wip, render-test app, draw a red triangle, yeah

.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

.vscode/tasks.json

@@ -9,6 +9,11 @@
             "problemMatcher": [
                 "$tsc"
             ]
+        },
+        {
+            "type": "npm",
+            "script": "app-render-test",
+            "problemMatcher": []
         }
     ]
 }
\ No newline at end of file

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",

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

src/apps/render-test/state.ts

+/**
+ * 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() {
+
+    }
+}

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

web/render-test/index.html

+<!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