Sage 9 + Three.js and Shaders

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

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: https://github.com/glslify/glslify-loader

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.

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

This topic was automatically closed after 42 days. New replies are no longer allowed.