Clean code about threeify HOT 7 CLOSED

Sketchfab's OSGjs does it this way https://github.com/cedricpinson/osgjs/blob/master/sources/osgShader/shaderLib.js

code:

import shader from 'osgShader/node/shader.glsl';

...

shaderSource: shader

webpack.config.js:

module: {
  loaders: [{
    test: /\.(frag|vert|glsl)$/,
    loader: 'raw-loader'
  }]
}

from threeify.

The problem with the glsl files is that our builder, tsconfig, doesn't package up glsl files. Thus I had to format them similarly to how Three.js currently does it. As a big string in a *.js file. It sucks because they are just a big string, thus no syntax highlighting, nor linting, nor auto-formatting (because it is not legal to reformat a JS string.)

I am not an expert on tsconfig-based building, but I know that webpack supports bundling of glsl files correctly. Thus it is likely best to switch back to webpack? I had initially gone with webpack, but @justinfagnani removed it: #1

from threeify.

GLSL is not an importable module type (yet, I've been working with standards to add CSS and HTML modules, GLSL might be another good target). I would probably recommend wrapping it into .js files with a build step - which doesn't have to be a bundler, it can be a per-file wrapping operation - or using a tagged template literal to hint to tools that they can highlight and format the glsl.

See this VS Code extension that highlights code in glsl`` tags: https://marketplace.visualstudio.com/items?itemName=boyswan.glsl-literal

from threeify.

I just had a look at BabylonJS, where the glsl files are on their own and imported as is. But their setup looks a bit more tricky and I don't understand it all. They are on webpack + file-loader. https://github.com/BabylonJS/Babylon.js/blob/master/materialsLibrary/src/fire/fireMaterial.ts#L20

from threeify.

I posted on twitter to get more input.... https://twitter.com/BenHouston3D/status/1269386322323607558

from threeify.

I think with the raw *.glsl files as they are right now, we could add a GLSL linter on them. It will likely not be able to follow the include structure, but at least it will catch the obvious errors.

from threeify.

I think most of this is now done.

from threeify.