Sage 9 + Three.js and Shaders

sage
1

Hi All,

I’m trying to implement this Three.js hover on images from code drops.
I can import Three.js fine. But when I start adding the shaders that use the file type glsl. I keep getting errors like this:.

ERROR Failed to compile with 4 errors 5:57:14 PM

error in ./resources/assets/scripts/routes/extras/shader/fragment.glsl

Module parse failed: Unexpected token (1:8)
You may need an appropriate loader to handle this file type.
| uniform float time;
| uniform float progress;
| uniform sampler2D texture1;

@ ./resources/assets/scripts/routes/three-test.js 11:0-53
@ ./resources/assets/scripts/main.js
@ multi ./resources/assets/build/util/…/helpers/hmr-client.js ./scripts/main.js ./styles/main.scss

error in ./resources/assets/scripts/routes/extras/shader/vertex.glsl

Module parse failed: Unexpected token (1:8)
You may need an appropriate loader to handle this file type.
| uniform float time;
| uniform float progress;
| uniform vec4 resolution;

@ ./resources/assets/scripts/routes/three-test.js 12:0-49
@ ./resources/assets/scripts/main.js
@ multi ./resources/assets/build/util/…/helpers/hmr-client.js ./scripts/main.js ./styles/main.scss

error in ./resources/assets/scripts/routes/extras/post/vertex.glsl

Module parse failed: Unexpected token (2:10)
You may need an appropriate loader to handle this file type.
|
| uniform float time;
| uniform float progress;
| uniform vec2 resolution;

@ ./resources/assets/scripts/routes/three-test.js 16:0-51
@ ./resources/assets/scripts/main.js
@ multi ./resources/assets/build/util/…/helpers/hmr-client.js ./scripts/main.js ./styles/main.scss

error in ./resources/assets/scripts/routes/extras/post/fragment.glsl

Module parse failed: Unexpected token (3:12)
You may need an appropriate loader to handle this file type.
|
|
| uniform float time;
| uniform float progress;
| uniform sampler2D tDiffuse;

@ ./resources/assets/scripts/routes/three-test.js 17:0-55
@ ./resources/assets/scripts/main.js
@ multi ./resources/assets/build/util/…/helpers/hmr-client.js ./scripts/main.js ./styles/main.scss

Does anyone know how I can use these shaders with Sage 9?

Thank you!
Dan

2

The error is telling you what the problem is:

Module parse failed: Unexpected token (3:12)
You may need an appropriate loader to handle this file type.

Webpack doesn’t know how to parse a .glsl file so it wants a loader to tell it what to do. I did a google search for “glsl” and found this, which may help: GitHub - glslify/glslify-loader: 💾 glslify loader module for webpack

This isn’t really a Sage issue though–it’s a webpack issue. I’d recommend looking in a Webpack or Three.js forum for additional guidance, as we try to keep these forums focused on the Roots stack.

3

Got it. Thank you for the prompt and helpful reply!