7 лет назад · 7a4456bacb
--- a/.gitignore
+++ b/.gitignore
@@ -4,4 +4,6 @@ node_modules/
 
				 debug.log
			
 
				 npm-debug.log
			
 
				 
			
 
				-*.sublime-workspace
			
 
				+*.sublime-workspace
			
 
				+
			
 
				+web/render-test/index.js
			
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@@ -9,6 +9,11 @@
 
				             "problemMatcher": [
			
 
				                 "$tsc"
			
 
				             ]
			
 
				+        },
			
 
				+        {
			
 
				+            "type": "npm",
			
 
				+            "script": "app-render-test",
			
 
				+            "problemMatcher": []
			
 
				         }
			
 
				     ]
			
 
				 }
			
--- a/package-lock.json
+++ b/package-lock.json
--- 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",
			
--- 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'));
			
 
				+const state = new State()
			
 
				+ReactDOM.render(<UI state={state} />, document.getElementById('app'));
			
--- a/src/apps/render-test/state.ts
+++ 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() {
			
 
				+
			
 
				+    }
			
 
				+}
			
--- 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>
			
 
				     }
			
 
				 }
			
--- a/web/render-test/index.html
+++ 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>