0

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.

gman
  • 100,619
  • 31
  • 269
  • 393
Rahat Dhande
  • 53
  • 5

1 Answers1

-2

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.

Script File Exectuing After Inline Script With CDN or External Domain On HTML injection

Javascript and WebGL, external scripts

Community
  • 1
  • 1
Prabindh
  • 3,356
  • 2
  • 23
  • 25
  • 2
    You don't need to "inject that into the DOM". You just need the contents of the shader source as a string. You can get that string anyway you choose. XHR requests, script tags, JavaScript constants. – gman Feb 02 '16 at 01:37
  • @gman For just rendering you dont need to. Your proposed suggestion does not work if there is a need to Provide an editable object for the user. – Prabindh Feb 02 '16 at 05:20
  • 1
    what does this question have to do with "user editable objects"? That's got zero relevance and even if you wanted to allow users to edit shaders appending to the dom has nothing to do with that – gman Feb 02 '16 at 08:05
  • I didnt see you explain how to create a .textContent (refer OP question) with a DOM-less entity ? – Prabindh Feb 02 '16 at 13:37
  • horrible answer, gman explained it well "you just need the contents of the shader source as a string", period. – pailhead Apr 12 '17 at 00:18