1

I remember that we had to embed shaders into html like so:

<script id="fragmentShader" type="x-shader/x-vertex"> </script>
<script id="vertexShader" type="x-shader/x-vertex"></script>

For me this isnt ideal. Of course I could create shader files and use PHP to include them but I dont want that either.

Is there any alternatives to use shaders in HTML without third party tools?

Asperger
  • 3,064
  • 8
  • 52
  • 100
  • Just curious - is there any reason why you don't want to use 'third party tools'? The only thing comes to my mind 'without third party tools' is to embed them as string in JS. – mtx Aug 17 '18 at 14:46
  • Curious how PHP fits all of this. – pailhead Aug 22 '18 at 04:16

1 Answers1

1

The shader code has to be available somehow to the WebGL code, so there is no magic here. Some alternatives are:

  • Use Ajax to retrieve the shader's source code. In this case, your HTML would be free of shaders and the Javascript code would retrieve them by making asynchronous calls. The disadvantage of this approach is that you may have lots of requests and the page loading time may be affected.
  • Hardcode the shader's source in the Javascript code as string literals. This would be hard to maintain since you would be mixing Javascript code with shader code in the same files. It may work for small projects, but it will bring headaches in the long run.
  • Use WebAssembly and compile your code (including shader sources) to a wasm file. In this case the shader sources will be hidden inside the wasm file and will be processed directly by the browser.
  • Use a toolkit to create a distribution bundle. You can keep your shaders and Javascript code separate and organized (e.g., into directories, etc.). Then you can use a Javascript toolkit like Gulp or Grunt to process the code and merge them into one single source file. You can look at the source code of Three.js and see how it is organized. If you want to use that library, all you have to do is import one single file into your HTML page. That file contains the Javascript and related shaders.
HugoTeixeira
  • 4,674
  • 3
  • 22
  • 32
  • The WASM approach seems to be the best option for me. Do you know any good compiler to compile the shading language to wasm? – Asperger Aug 18 '18 at 10:29
  • Take a look at *Emscripten* http://kripken.github.io/emscripten-site/ -- but I should remember that the shaders would still be ASCII chars inside the _wasm_ file, so if the idea is to hide the shaders, this would *not* be very efficient. The GPU is the only piece that really compiles the shaders, but this only happens when you run the WebGL code in the browser. If you want to hide your code from curious people, then you should look for an _obfuscator_ tool instead. – HugoTeixeira Aug 18 '18 at 14:21
  • 1
    Are you really going to go from a – pailhead Aug 22 '18 at 04:11
  • 1
    This answer is overkill, in JS context a shader is just a string, nothing more nothing less. How you obtain it has **absolutely nothing** to do with either webgl, webgl2, nor three – pailhead Aug 22 '18 at 04:13