Three.js source does not work as ES6 module

Description of the problem

Three.js source cannot be imported as ES6 module. Developers should be able to use Three.js in pure ES6 module form.

For example, the following should work:

<script type="module">
import * as THREE from "./src/Three.js";
</script>

Instead, we get errors like this one:

Failed to load module script: The server responded with a non-JavaScript MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec.

This happens because glsl shader chunks are not real modules and need to be processed during build step by rollup glsl plugin.

Fixing this would improve development experience and make it possible to use threejs without build step or even without any npm dependencies at all.

Motivation

ES6 modules are a great improvement to JavaScript. Together with HTTP/2 network protocol which eliminates multiple HTTP request overhead they enable seamless development experience without continuous build process. Building, bundling and minification should most definitely still be part of the deployment strategy, but for development process, it is not necessary. Here is an interesting article about ES6 modules by contentful.

This issue is about enabling threejs to work without any build process and without npm install during development.

Suggested solutions

1. <del>Rollup ShadersChunkSrc.js into ShaderChunk.js separately before building the library</del>. This solution was attempted in PR #14447 but it did not reach consensus. Main issue was that this approach results with a partial “build” inside src/ directory.

2. Convert each individual glsl shader chunk into ES6 module (automatically). This approach would suffer from the same issue as no.1 but some prefer it better.

3. Rewrite and maintain shader chunks as ES6 modules using template literals. For example:

var encodings_fragment = glsl`
 gl_FragColor = linearToOutputTexel( gl_FragColor );
`;
export {encodings_fragment};

1. Another solution suggested by @looeee: do nothing (or write better documentation): it will not be possible to import the three.js src directly in the browser, and people bundling the source themselves have to add plugins such as glslify to their build step (as they currently do)

Three.js version

• [x ] Dev

Browser

• All of them

OS

• All of them

[dmnsgn]

@arodic @mrdoob Just created a straightforward PR that could help with syntax highlighting of glsl templates literals: https://github.com/mrdoob/three.js/pull/15473 (more infos in PR)

 // Advantage here is that there would be no need for a glsl tag function, just a comment
+ var encodings_fragment = glsl`
- var encodings_fragment = /* glsl */`
  gl_FragColor = linearToOutputTexel( gl_FragColor );
 `;
export {encodings_fragment};

[Itee]

@arodic Did you take look at three-full ? All shaders are put in the same folder and are es6 modules. In that way you should be able to import them in the way you want. Waiting that #9562 be close.