From 4c52e2d8fd3be12f8aa57129a81c4653305a2d1b Mon Sep 17 00:00:00 2001
From: Brian Peiris <brianpeiris@gmail.com>
Date: Tue, 30 Oct 2018 19:34:00 -0700
Subject: [PATCH] Move fragment shader to its own file
---
package-lock.json | 18 ++++++---
package.json | 1 +
src/components/media-highlight-frag.glsl | 44 +++++++++++++++++++++
src/components/media-loader.js | 50 +-----------------------
webpack.config.js | 4 ++
5 files changed, 64 insertions(+), 53 deletions(-)
create mode 100644 src/components/media-highlight-frag.glsl
diff --git a/package-lock.json b/package-lock.json
index 0bbad51e8..fef46892e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -518,7 +518,9 @@
"requires": {
"@tweenjs/tween.js": "^16.8.0",
"browserify-css": "^0.8.2",
+ "debug": "github:ngokevin/debug#ef5f8e66d49ce8bc64c6f282c15f8b7164409e3a",
"deep-assign": "^2.0.0",
+ "document-register-element": "github:dmarcos/document-register-element#8ccc532b7f3744be954574caf3072a5fd260ca90",
"envify": "^3.4.1",
"load-bmfont": "^1.2.3",
"object-assign": "^4.0.1",
@@ -532,11 +534,7 @@
"dependencies": {
"debug": {
"version": "github:ngokevin/debug#ef5f8e66d49ce8bc64c6f282c15f8b7164409e3a",
- "from": "github:ngokevin/debug#ef5f8e66d49ce8bc64c6f282c15f8b7164409e3a"
- },
- "document-register-element": {
- "version": "github:dmarcos/document-register-element#8ccc532b7f3744be954574caf3072a5fd260ca90",
- "from": "github:dmarcos/document-register-element#8ccc532b7f3744be954574caf3072a5fd260ca90"
+ "from": "github:ngokevin/debug#noTimestamp"
},
"three": {
"version": "0.94.0",
@@ -3906,6 +3904,10 @@
"esutils": "^2.0.2"
}
},
+ "document-register-element": {
+ "version": "github:dmarcos/document-register-element#8ccc532b7f3744be954574caf3072a5fd260ca90",
+ "from": "github:dmarcos/document-register-element#8ccc532b7"
+ },
"dom-converter": {
"version": "0.1.4",
"resolved": "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.1.4.tgz",
@@ -10542,6 +10544,12 @@
}
}
},
+ "raw-loader": {
+ "version": "0.5.1",
+ "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-0.5.1.tgz",
+ "integrity": "sha1-DD0L6u2KAclm2Xh793goElKpeao=",
+ "dev": true
+ },
"react": {
"version": "16.4.1",
"resolved": "https://registry.yarnpkg.com/react/-/react-16.4.1.tgz",
diff --git a/package.json b/package.json
index d9e3d59c0..0462a0f4e 100644
--- a/package.json
+++ b/package.json
@@ -87,6 +87,7 @@
"htmlhint": "^0.9.13",
"node-sass": "^4.9.3",
"prettier": "^1.7.0",
+ "raw-loader": "^0.5.1",
"rimraf": "^2.6.2",
"sass-loader": "^6.0.7",
"selfsigned": "^1.10.2",
diff --git a/src/components/media-highlight-frag.glsl b/src/components/media-highlight-frag.glsl
new file mode 100644
index 000000000..e47db1ac0
--- /dev/null
+++ b/src/components/media-highlight-frag.glsl
@@ -0,0 +1,44 @@
+if (hubs_HighlightInteractorOne || hubs_HighlightInteractorTwo) {
+ mat4 it;
+ vec3 ip;
+ float dist1, dist2;
+
+ if (hubs_HighlightInteractorOne) {
+ it = hubs_InteractorOneTransform;
+ ip = vec3(it[3][0], it[3][1], it[3][2]);
+ dist1 = distance(hubs_WorldPosition, ip);
+ }
+
+ if (hubs_HighlightInteractorTwo) {
+ it = hubs_InteractorTwoTransform;
+ ip = vec3(it[3][0], it[3][1], it[3][2]);
+ dist2 = distance(hubs_WorldPosition, ip);
+ }
+
+ float ratio = 0.0;
+ float pulse = sin(hubs_Time / 1000.0) + 1.0;
+ float spacing = 0.5;
+ float line = spacing * pulse - spacing / 2.0;
+ float lineWidth= 0.01;
+ float mody = mod(hubs_WorldPosition.y, spacing);
+
+ if (-lineWidth + line < mody && mody < lineWidth + line) {
+ // Highlight with an animated line effect
+ ratio = 0.5;
+ } else {
+ // Highlight with a gradient falling off with distance.
+ if (hubs_HighlightInteractorOne) {
+ ratio = -min(1.0, pow(dist1 * (9.0 + 3.0 * pulse), 3.0)) + 1.0;
+ }
+ if (hubs_HighlightInteractorTwo) {
+ ratio += -min(1.0, pow(dist2 * (9.0 + 3.0 * pulse), 3.0)) + 1.0;
+ }
+ }
+
+ ratio = min(1.0, ratio);
+
+ // Gamma corrected highlight color
+ vec3 highlightColor = vec3(0.184, 0.499, 0.933);
+
+ gl_FragColor.rgb = (gl_FragColor.rgb * (1.0 - ratio)) + (highlightColor * ratio);
+}
diff --git a/src/components/media-loader.js b/src/components/media-loader.js
index 1affa2140..e9393c742 100644
--- a/src/components/media-loader.js
+++ b/src/components/media-loader.js
@@ -1,6 +1,7 @@
import { getBox, getScaleCoefficient } from "../utils/auto-box-collider";
import { guessContentType, proxiedUrlFor, resolveUrl } from "../utils/media-utils";
import { addAnimationComponents } from "../utils/animation";
+import mediaHighlightFrag from "./media-highlight-frag.glsl";
import "three/examples/js/loaders/GLTFLoader";
import loadingObjectSrc from "../assets/LoadingObject_Atom.glb";
@@ -58,56 +59,9 @@ function injectCustomShaderChunks(obj) {
vlines.unshift("uniform bool hubs_HighlightInteractorTwo;");
shader.vertexShader = vlines.join("\n");
- const fchunk = `
- if (hubs_HighlightInteractorOne || hubs_HighlightInteractorTwo) {
- mat4 it;
- vec3 ip;
- float dist1, dist2;
-
- if (hubs_HighlightInteractorOne) {
- it = hubs_InteractorOneTransform;
- ip = vec3(it[3][0], it[3][1], it[3][2]);
- dist1 = distance(hubs_WorldPosition, ip);
- }
-
- if (hubs_HighlightInteractorTwo) {
- it = hubs_InteractorTwoTransform;
- ip = vec3(it[3][0], it[3][1], it[3][2]);
- dist2 = distance(hubs_WorldPosition, ip);
- }
-
- float ratio = 0.0;
- float pulse = sin(hubs_Time / 1000.0) + 1.0;
- float spacing = 0.5;
- float line = spacing * pulse - spacing / 2.0;
- float lineWidth= 0.01;
- float mody = mod(hubs_WorldPosition.y, spacing);
-
- if (-lineWidth + line < mody && mody < lineWidth + line) {
- // Highlight with an animated line effect
- ratio = 0.5;
- } else {
- // Highlight with a gradient falling off with distance.
- if (hubs_HighlightInteractorOne) {
- ratio = -min(1.0, pow(dist1 * (9.0 + 3.0 * pulse), 3.0)) + 1.0;
- }
- if (hubs_HighlightInteractorTwo) {
- ratio += -min(1.0, pow(dist2 * (9.0 + 3.0 * pulse), 3.0)) + 1.0;
- }
- }
-
- ratio = min(1.0, ratio);
-
- // Gamma corrected highlight color
- vec3 highlightColor = vec3(0.184, 0.499, 0.933);
-
- gl_FragColor.rgb = (gl_FragColor.rgb * (1.0 - ratio)) + (highlightColor * ratio);
- }
- `;
-
const flines = shader.fragmentShader.split("\n");
const findex = flines.findIndex(line => fragRegex.test(line));
- flines.splice(findex + 1, 0, fchunk);
+ flines.splice(findex + 1, 0, mediaHighlightFrag);
flines.unshift("varying vec3 hubs_WorldPosition;");
flines.unshift("uniform bool hubs_HighlightInteractorOne;");
flines.unshift("uniform mat4 hubs_InteractorOneTransform;");
diff --git a/webpack.config.js b/webpack.config.js
index beeda9ac1..d8e603694 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -154,6 +154,10 @@ module.exports = (env, argv) => ({
context: path.join(__dirname, "src")
}
}
+ },
+ {
+ test: /\.(glsl)$/,
+ use: { loader: "raw-loader" }
}
]
},
--
GitLab