From 43fc8e94ebcf38db4d52a9750d7007ed272fd7e1 Mon Sep 17 00:00:00 2001
From: Alexander Rose <alex.rose@rcsb.org>
Date: Tue, 27 Mar 2018 18:24:23 -0700
Subject: [PATCH] require shaders from files using glslify and webpack
---
package-lock.json | Bin 394484 -> 418006 bytes
package.json | 15 ++++++++++-----
src/apps/render-test/state.ts | 27 +++++++++------------------
src/mol-gl/camera.ts | 3 ---
src/mol-gl/shader/point.frag | 3 +++
src/mol-gl/shader/point.vert | 10 ++++++++++
tsconfig.json | 11 ++++++-----
webpack.config.js | 14 ++++++++++++++
8 files changed, 52 insertions(+), 31 deletions(-)
create mode 100644 src/mol-gl/shader/point.frag
create mode 100644 src/mol-gl/shader/point.vert
create mode 100644 webpack.config.js
diff --git a/package-lock.json b/package-lock.json
index df4d12aac59e87d7c5b3d2ca578886a074b52f2e..9a14a78b688d55a4ea47254ba66718067ba6db43 100644
GIT binary patch
delta 7167
zcmd^Edu&_hb;o_#vt-GVWjPipS+Zoy(qxL{<=cQ0Q+!E$lOicnNtW<&MPBjp{U*}H
zK~kp)V%IL4oESyZddO0sO#(UHtYJ-pcu3YYz)(A0+AU}{JAu1Dw$xUaZZlFR`|hP4
zRO<aPxEqj70)+dW@80iqe&6r>&e11N?)lk;z9r^;c=ZwNE<!e`gOvuU=!kGqi8R7V
zkYQ5QIJ<X9T(J~YOxa*o#|>J4I<H+U*Q?Xa%;JpM1Lsyq%NF^hY*L|wOXK(<_@h_w
zHrVqCwg+y!kM+Q@5Izo$m+&r32Ks(%OvEPGg4CAE=%!*5hHzOMGP1r@CFs=@;lgW#
z2;RJf^}=T|><>X^!AKkpd-YE#4Lp1gIYbHbz@u?$WI!%4aq+lPR-W+`?X_HPqO5Y*
zypfWlU=CK`>d$aJSZK_RW<BjAdf`SFPQgPR`1UQbNjX|9=r7?T@a7(Te9f@WK^%t5
zzaaZp4UHA^0dc4_V=SA@bi`80)D~(c#}u8PHak2MSr4q7#I!$*zW-2$$krBMXciMU
zx~{8xqZ!m>Ii`S4as9dBxxOEcJx)@-*;#9>Vwk2i(u9ef;u6VVXfC19hus<NjNVtZ
z2UWqM)e}#qU1b-O$a_sildoWjNvE87x?Eb6`Mq)5ltHSJxt(5zqBfiGSgf#bFQtaR
z_$tu{+<A27pZ+t}2EVmq{q5;YsxW+bXjnEW1IJD3(DJtl>fg64e=vjn!J)>Lqat{6
z9NP}*2k^1GVx=s{RGB=D*1i5Lk-^I2#Qwf&!WY%0mF0pz707v`UR5|0RNF!}2gu$f
z)$sA_SPudL`u)9wpeu<{*k%l%Y1S~X;P#n)<@p(<(o{(}LbPIbN~N5O=;N{E{~89C
zKPX`y4atQU7&!L`!u`+-xVn2G%p3TtwE6@$p2J7QT)q&DCFp$4ud~SX<~m!i7q#kn
zsnSw`bB|F@@W-)!81KN_;iEHTH*~16tuSzr*b0xtu`c+Qi5$7(8+PSgVsQD;%h+G<
zz|%1}&5>f5zksPa*);MyzhL13hCJk`h%F|wnR-%_w^&sH^#Z3zh87E!g3Im#`MabF
zeldh?6C-%3C+XosZ9}U+!_iDC6;8*PJm^1fzO@fJEMzCV^dTVu?LKS=;u|$!N61mJ
z)!?3(PqPK1nJ%$rJ129^O&A=hU`|_s(^m*7yxK>NLgq<A16?Aj4;mj+qhi^tMU&5j
zoT+)+qTI`<xpIJGU0&_H(j;8W<zK&sU4E>KD{vAvy~sq1k{E;b)#yIlC-6!m`x|;Z
z{>5(L(%#0}$kL-?g*R8I6wK0Et?ZK;ty9yMP+jI^Xrs;p-APj2i{>h3l1zGS#t4^*
zCc*O$)UKVw!l2FGLNU*#;~;;L=<VDvvvqV>o(eHY@;3O+d2%0^C74nyypm@M8LrGA
z=d?B<djvx+@|Vj|mC4D>)~1SHPc^Q0#tdn;94o>~2H)K{H981C=%CuR2yRlq1IMvm
zjD|Ngl#I6z3!dn{4{>ZZMs9`9PO4onEuBPzE9L{LcxfT+EUI-nUon(*(%zUqAXoU|
z(ofddddoGc3!EP!eBRFyonRlq4ngo5)rn>~<)+5OnsT_RonM@)Io0KSs1TeFBR2DA
zrmEqj;H=(_V~~Uk1vZ{eG3jE%^Y<cn?|Doqzil_quea}z&;n_RvaxussGOazl-N|s
zSfe>>Fr`WbUHW-A_Y6ML)$;WQIJ$zk`oI@^HgM5&q3}AK{SgW*ZW`a!r%dK@fs`+_
zXs#uujeea>Uz@dtgA-W@ze)%mxSgk4YzUp`-8YH8hU_B}PIZy=$fh-9i;2zKMei3A
zaAg4-70+mci^h^oXAQ8XqRnQnnGH&vYC0PXc^a2w!yTIj0@>FQzYMXsdUTV$fI`(e
zyw*0!8{tNZI4Ck|leR)F6bdWta!zAUFGSPqbh+-EnT898an<gYu{Io7fU7THy_=7j
zU-h}Ch+Vr|Z$vhaCeIgHrXbvk)-Qy0!N4wRaA(ULt5+JjuHyaZ#MG?_S?v=p-{v!G
z?E&mbd_NKqN{@MAE@YfCc;m@@IFqt2OfM)hWslw{9A4YTq>V>U41@b2OfA{4Nj6r#
zd8!RNtUQg6ie`-pBW+Aq<o2M&T$Kfq3s!5Ha~s%f<Mip>ur!KyZsW;FIC+qM9UHhU
z5N_k8<^l0Q5M_ck7vt0>y{3t1$tU$LmW_&l$CdJE8Y>U~&LqEjgWN0Zrxoo@ZrZ$;
zRlef)A)fPlVs>Rfr_wr2X{&c`K0d?L7w25Ft_qK}?HfnK)*Dy1^zpHfgg1^8ZE$}l
zHa6JW&*V4FBM>0=1knRaL99m<jXS3OtkPHw=IcTIRKOB2nz9v5O`&O=zOI6MZ&KR@
zmO6ctn!MwP_@&XD7k)rY@_TQG$F~ywn5uErsDk@f$X(5|_z5v8_Jm8(d5tX=s2My_
zzsWTn%&NIe-Iw>r8*<B0ID8M*)6o>{s}cLzUz3CI+q=pA&CqkMjESKADXO!v-8<IJ
zdyHMEt-1<5K`ub`G>+ceBl4;jU2{@{#SjSOvJ+Lhnp^OBDlr<x2A&i~B3x5?qBNpa
z8weO!4QTL>XUJZG#?i=<NGToT82%#~B^1gpe#F0mc&`Abjv(Uwd^<%!=0B)C(Dmmi
zY+baFZ7}Y@wr?+ni)>Vq%EU?>14GBDUI8o=uTfNd@Ed{2yQ%%~z$^H+JIqsdLwh?)
zcCxpS=sWf_ihM3N^*y+98EgMiBryN8U=p}s&8v+^N09D%j_QQL@8V<oRzbDu@C|IO
z8c+boJ|*^xn1G^c30d^aOemb0XT!$nU?6QU7Nju&U_AnoTIC%IAef%)Z4DJds7Ce`
z1^!=zqMp`J6l0o%s{cOGyF(a%RkZP;aOo+c_rD|M+Sm5UNB5QQ<05$YB}_TcVqFt4
zYtWX+VJSln_sb=Q+KjB`$}w)AG^oqF?F$uGX^siYEu6rAN6r)CEvrI3{2tNUWZu?W
z)wi*Fo?4r?O3ur4xcC@00R#771KU#Jtb}7zY*Dy~FwjADG%jB2TlXE83C9}xy9eOL
zhbW~ydH^5qZ}NeJ?^$PXe)+rs9%b>-XZK)aA5$qsr)<i2c)Dl_S95Wl-lvn!mlySd
zRHg(@fe-!_AAI7iqxkY$M+wytl3xg%ZA0wC3*TMqYeV>0dxqQ`c~GQQa0z|2;x=Yv
zdW+N^h^UL1V1PB)>u`1nQ$gFmU~Pl~CHZ_og2<$!aIS;eizz@*xwrm~=tR$gye*Wh
zi9oQPtW<r4c*R$r$XHYEq%BxuLH;!)Z;u|p4#K?@J_?WcvEJq1e1-VRQ3$_)678;=
zSZ8DJ^)VsEMl0kq?ZzqDsEE#}b?JIuB~OQ}mWWlCcGmRCT(oX83yvFl5Z?(8dQjGV
z;yrTb|KG~Va`p}4<!+Kq7qW2r47wUaUnNO6{2I~LxPD*^GAQNU!*`<84V`W#BIIzZ
z23Yzb3UoSeKx>+-_yZBEv0%|;V-<(WZqA3&6M`0j=YLFWT}G)h8zOS03}jy<_CIri
zq{XOFWF$z{FyRy$y0s}du+G>R&f&2Z=9Ke_X+x-FEvDw&Ty5G1r=6(IGU%q-;K9#O
zUhck0@pUsLoW-!;lL*;;k=P9%51~|Q?L5@{S%^>_>&kI*Ok}f#b1Iq5DJ!_L_BtKV
zCLD59^l<6xE&14&p?cO5eEt@((RcTwi^dBXw9!*N#3+*Hv~<oAGMWO@g}B_NiI`}5
zmbK01Oa@h9UC0b?5;E)MhiZ{Y$5t5+9v#N_!$yj_rbyL7iVFA>#JD(8);MfQy11C)
z*s4_@aVYBPQihSsGR>)O`B4FeufpKNGVp9A#7#OlK29EO-x{t6+$YH0H_oFvKz`LC
z(BoPIzLO(+1=(aY%IxYAZPQ1&6dg=xbc%S!#M!b;xY1o6S$<nd(vfXpj>}XeDCj(s
zBl}@mg3;naV%^BgvDT(g2oQS$Iz!YTuhUcdx;|@n1WSohK9TWef_m^gPmV1A+q2|H
z61*I4mZ`cJbm4yVExfI9-`=r-LQ^&|<uG5fYH6W5Fx~L%9u^gKPG?-1RFvk@s`;r}
ze8In{)G*dXby_F|_3)81#>AO)Q}v<Gv;qNdTkmMBygh*K3*G4cD>eM()7WlQY875P
z%VPV*#-y|w4QOi#MR2Z`_lK*dtUlsIhp2N1{yub`YHt|-sS92?Lv4ZYoxnQa?UQ5|
zJdi*_@K-;_yP)eN*4}XZcn2(9LK5t$6DVZOoJ88}=<BHRboX<V1YS9Xbz^dPI8N~h
zOUnZj26si{n~fCIF_~<_U6#f2AubV?fq>5!zkzDeuXj*8;nUBE?cnfJhv3#X(1>9z
zH7<5)ZOY_?)+evIYq4Si)hTGR)9cSgOf$_I)TOt`E$v%Z#i$^GjxA9nNIeuixO&1(
znYwY}%{Gz&-Ae>71FX7SD6aK{7oCP#XE|ZeI;Qj0l7e=J1PKIzZxdtNQPFn&%weCL
z5bs98uT?#-l_2#ld>4HFHLOplD{ft*Q@H`}?QP}3wb5j7>^*XD@9$i);Z5M<HT<p?
z#5BLA5ih!KQhU}3vIPehj00=Y7{OrAYBUyW4W6lpJU62>MRcb4lqbL>RdICPgS8C=
zz@PmwBFCj`1O+diz&iWold4I1%U*d77-kBkBFmv_!aFFiT>m+~gOH=u$oo;re*+cn
zi&#%%DRB^9K85WBZxa2<{*t&$JV$E-Ua8NkFU?n!exunCQKh4?aH;4|Zbro}c*lq!
zb{~t%T|6q#Bq|915{0HjIy14zvDpbzD3sSk42np7-ke{s=M^Slhz9pJZE$S}Rbp;j
zN2&3RT?7g45o`?p<eU6baBN%@4@~>!Tr&=~P?Z*C!L+wl(OVZ(*7+c>Or&t;6KwcS
z{=@QR3N-Ib;~lWWii-p{V*4;P$oh$9>)c7~fT)rzPk9Sj@4}R~s*C0AN-i3)DJB?)
kjE{;3q05e|;g%Iw+}VG8{tv{gCocb#T)zBMYM<&q0l2kHz5oCK
delta 115
zcmV-(0F3|E!5Q?47_ep9vjyLJZ?_#+0R}9$*oOg0H@A4f0mcuvJJbQugNL$r0=Kev
z12jFiBew&2K(}A~1FI32dTIm@mr(o!442?~0R^`Q4+KeBw|{U1Knu5!d;~FKx0v4q
V;w`u25e5DVhq)^Sx4A0@9W_f^FGc_W
diff --git a/package.json b/package.json
index 6329b7aac..db448a52d 100644
--- a/package.json
+++ b/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",
diff --git a/src/apps/render-test/state.ts b/src/apps/render-test/state.ts
index 36f9c6192..b5d995ae3 100644
--- a/src/apps/render-test/state.ts
+++ b/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)
})
diff --git a/src/mol-gl/camera.ts b/src/mol-gl/camera.ts
index 0785b4e15..c2965e48c 100644
--- a/src/mol-gl/camera.ts
+++ b/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
}
diff --git a/src/mol-gl/shader/point.frag b/src/mol-gl/shader/point.frag
new file mode 100644
index 000000000..294326afa
--- /dev/null
+++ b/src/mol-gl/shader/point.frag
@@ -0,0 +1,3 @@
+void main(){
+ gl_FragColor = vec4(1, 0, 0, 1);
+}
\ No newline at end of file
diff --git a/src/mol-gl/shader/point.vert b/src/mol-gl/shader/point.vert
new file mode 100644
index 000000000..3e3b673b5
--- /dev/null
+++ b/src/mol-gl/shader/point.vert
@@ -0,0 +1,10 @@
+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
diff --git a/tsconfig.json b/tsconfig.json
index f8761db56..8c7f44386 100644
--- a/tsconfig.json
+++ b/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": [ "**/*" ]
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 000000000..a6c2bea5f
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,14 @@
+module.exports = {
+ module: {
+ rules: [
+ {
+ test: /\.(glsl|frag|vert)$/,
+ loader: 'raw-loader',
+ },
+ {
+ test: /\.(glsl|frag|vert)$/,
+ loader: 'glslify-loader',
+ }
+ ]
+ }
+}
\ No newline at end of file
--
GitLab