require shaders from files using glslify and webpack

package.json

@@ -13,6 +13,7 @@
   "scripts": {
     "lint": "tslint src/**/*.ts",
     "build": "tsc",
+    "postbuild": "copyfiles --up 1 src/mol-gl/shader/*.vert src/mol-gl/shader/*.frag build/node_modules/",
     "watch": "tsc -watch",
     "test": "jest",
     "script": "node build/node_modules/script.js",
@@ -31,13 +32,14 @@
       "build/node_modules"
     ],
     "moduleNameMapper": {
-      "mol-task($|/.*)": "<rootDir>/src/mol-task$1",
-      "mol-comp($|/.*)": "<rootDir>/src/mol-comp$1",
-      "mol-util($|/.*)": "<rootDir>/src/mol-util$1",
       "mol-data($|/.*)": "<rootDir>/src/mol-data$1",
-      "mol-math($|/.*)": "<rootDir>/src/mol-math$1",
+      "mol-gl($|/.*)": "<rootDir>/src/mol-gl$1",
       "mol-io($|/.*)": "<rootDir>/src/mol-io$1",
-      "mol-model($|/.*)": "<rootDir>/src/mol-model$1"
+      "mol-math($|/.*)": "<rootDir>/src/mol-math$1",
+      "mol-model($|/.*)": "<rootDir>/src/mol-model$1",
+      "mol-ql($|/.*)": "<rootDir>/src/mol-ql$1",
+      "mol-task($|/.*)": "<rootDir>/src/mol-task$1",
+      "mol-util($|/.*)": "<rootDir>/src/mol-util$1"
     },
     "testRegex": "\\.spec\\.ts$"
   },
@@ -53,7 +55,10 @@
     "@types/react": "^16.0.4",
     "@types/react-dom": "^16.0.4",
     "benchmark": "^2.1.4",
+    "copyfiles": "^2.0.0",
+    "glslify-loader": "^1.0.2",
     "jest": "^22.4.2",
+    "raw-loader": "^0.5.1",
     "regl": "git+https://github.com/regl-project/regl.git#45c6ec570232420fca21567499c9c5a2a054432e",
     "rollup": "^0.56.2",
     "rollup-plugin-buble": "^0.19.2",

src/apps/render-test/state.ts

@@ -9,6 +9,9 @@ import * as glContext from 'mol-gl/context'
 import { Camera } from 'mol-gl/camera'
 import { Vec3 } from 'mol-math/linear-algebra'
 
+const pointVert = require('mol-gl/shader/point.vert')
+const pointFrag = require('mol-gl/shader/point.frag')
+
 export default class State {
     regl: REGL.Regl
 
@@ -28,33 +31,21 @@ export default class State {
             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);
-            }`,
-
+        const drawPoints = regl({
+            vert: pointVert,
+            frag: pointFrag,
             attributes: {
                 position: [[0, -1, 0], [-1, 0, 0], [1, 1, 0]]
             },
-
-            count: 3
+            count: 3,
+            primitive: 'points'
         })
 
         regl.frame(() => {
             camera.update((state: any) => {
                 if (!camera.isDirty()) return
-                console.log(state, camera)
                 regl.clear({color: [0, 0, 0, 1]})
-                drawTriangle()
+                drawPoints()
             }, undefined)
         })
 

src/mol-gl/camera.ts

@@ -177,9 +177,6 @@ export namespace Camera {
         function update (props: any, block: any) {
             setState()
             injectContext(props, block)
-            if (dirty) {
-                console.log(view)
-            }
             dirty = false
         }
 

src/mol-gl/shader/point.frag

+void main(){
+    gl_FragColor = vec4(1, 0, 0, 1);
+}
\ No newline at end of file

src/mol-gl/shader/point.vert

+precision mediump float;
+uniform mat4 projection, view;
+attribute vec3 position;
+
+varying vec3 vPosition;
+
+void main(){
+    gl_PointSize = 20.0;
+    gl_Position = projection * view * vec4(position, 1.0);
+}
\ No newline at end of file

tsconfig.json

@@ -14,13 +14,14 @@
         "outDir": "build/node_modules",
         "baseUrl": "src",
         "paths": {
-            "mol-task": ["./mol-task", "./mol-task/index.ts"],
-            "mol-comp": ["./mol-comp", "./mol-comp/index.ts"],
-            "mol-util": ["./mol-util", "./mol-util/index.ts"],
             "mol-data": ["./mol-data", "./mol-data/index.ts"],
-            "mol-math": ["./mol-math"],
+            "mol-gl": ["./mol-gl"],
             "mol-io": ["./mol-io"],
-            "mol-model": ["./mol-model"]
+            "mol-math": ["./mol-math"],
+            "mol-model": ["./mol-model"],
+            "mol-ql": ["./mol-ql"],
+            "mol-task": ["./mol-task", "./mol-task/index.ts"],
+            "mol-util": ["./mol-util", "./mol-util/index.ts"],
         }
     },
     "include": [ "**/*" ]

webpack.config.js

+module.exports = {
+    module: {
+        rules: [
+            {
+                test: /\.(glsl|frag|vert)$/,
+                loader: 'raw-loader',
+            },
+            {
+                test: /\.(glsl|frag|vert)$/,
+                loader: 'glslify-loader',
+            }
+        ]
+    }
+}
\ No newline at end of file