Three.js boilerplate with parcel bundler on Windows

Questions
1

Hello, I am trying to run this codesandbox example on my Windows machine but have an error. Can you check it too?

Error ReferenceError: regeneratorRuntime is not defined I solved when I add .babelrc file

    "presets": [
        ["env", {
          "targets": {
            "browsers": ["last 2 Chrome versions"]
          }
        }]
      ]
    }

but after that appear another error WebGL: INVALID_VALUE: shaderSource: string not ASCII which I could not solve with google. Can somebody help me with this problem?

2

This happens because parcel server somehow return UTF, but WebGL want ASCII.
Here stupid solution: replace function createShaderMaterial() with inline shaders

  const material = new ShaderMaterial({
    vertexShader: `void main() {
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.);
    }`,
    fragmentShader: `precision mediump float;

    void main() {
      gl_FragColor = vec4(.1, .001, 1., 1.);
    }`
  });

Why this happens on Windows? Anyway FileLoader is from Three.js library. Why he not check encoding?

3

Here new boilerplate with parcel-plugin-glsl which is work on windows

Last question still open.

1 Like
4

Um, I’m not sure this forum is the right place for Parcel related questions since I have not seen a single one in the last two years^^. You might have more success at the respective github repo or at stackoverflow.

1 Like
5

You probably need to import the shader files at the top of index.js so that Parcel bundles them along with your app. I’m not sure of the exact syntax, but something like:

import fragmentShaderURL from '../shaders/fragment.glsl';

If that doesn’t work, you’ll either need to jump through some hoops to get Parcel to read GLSL (the “zero config” bundler :wink: ), or you can just convert the files to js and import normally:

fragment.glsl

precision mediump float;

void main() {
  gl_FragColor = vec4(.1, .001, 1., 1.);
}fragment.glsl

convert to fragment.js

export default const fragmentShader = /* glsl*/ `
   precision mediump float;

   void main() {
     gl_FragColor = vec4(.1, .001, 1., 1.);
   }
`

By including /* glsl*/ you can still get correct syntax highlighting if your editor is set up correctly.

Then you can import it like this:

import vertexshader from './shaders/vertexShader.js';
import fragmentShader from './shaders/fragmentShader.js';

const shaderMaterial = new ShaderMaterial( {
 uniforms: {}
 vertexShader,
 fragmentShader
})

That way you don’t need to worry about getting the bundler to understand glsl files.

6

Generally I would agree, but I’ve found that bundlers are not set up to deal with .glsl files easily, and that’s unusual enough that it’s very hard to hunt down the info on the bundler forums.

1 Like