I'm trying to write custom vertex and fragment shader programs for a three.js project. I only need a particular feature (custom clipping plane) so I want to simply modify the shaders three.js already generated for me. The problem is that such shader programs are really long (fragment shader is over 700 lines of code). I need to store the shaders somehow and access them when I declare a new ShaderMaterial.
Where can I write my shaders and how can I access them? The easiest option for short shader programs is to use an html element and access it via .textcontent, but as I've said the programs are huge so that would make my html file very long. I've tried using javascript's fileReader, but haven't found examples that use local files that are part of the website's package - the files/filetypes fileReader uses are input by the user.
I'd like to use a .txt file for my shader programs, I just can't figure out how I'd access them. Please send help.
Since the WebGL code is running on the Client side, before being able to run the code you would need to
(1) request the shader file from the server over some protocol and
(2) Inject that into the DOM using DOM APIs.
There are several options depending on if you are using jquery, or other API.
For jquery, refer to https://github.com/mrdoob/three.js/issues/283
For other APIs, refer to the threads for example at,
Script File Exectuing After Inline Script With CDN or External Domain On HTML injection