# Sage 9 + Three.js and Shaders

**URL:** https://discourse.roots.io/t/sage-9-three-js-and-shaders/18833
**Category:** sage
**Created:** 2020-08-03T22:08:19Z
**Posts:** 4

## Post 1 by @bws_dan — 2020-08-03T22:08:19Z

Hi All,

I’m trying to implement this [Three.js](https://threejs.org/) hover on images from [code drops](https://tympanus.net/Tutorials/webgl-mouseover-effects/step3.html.).  
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

---

## Post 2 by @alwaysblank — 2020-08-03T22:16:21Z

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](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.

---

## Post 3 by @bws_dan — 2020-08-04T12:47:06Z

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

---

## Post 4 by @system — 2020-09-14T22:08:21Z

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