The main goal of this project was to add an existing open-source shader editor tool to the PDE. This tool would be a text editor running as a separate independent process from the PDE but would be able to communicate with the PDE using IPC and update the PDE's display window in real-time. The shader editor tool integrated is called Shdr. The main tasks implemented uptil now are the following:

  • running Shdr as a desktop app from electron

  • execution of Shdr from within the PDE

  • IPC(inter-process communication) between PDE and Shdr

  • IPC between electron's main and renderer process

  • informing PDE when Shdr recompiles shader

  • saving Shdr's editor contents to external file

Last 2 weeks were spent in enabling the Shdr to send a message to the PDE whenever it's default shader compiled successfully. Currently this is done by a button click but would later be happening automatically whenever Shdr detects a change in the text editor. When the PDE is informed about the shader recompilation from Shdr, it would recompile its own shader as well. However for the display window in PDE to update on shader recompilation, the shader files in the sketch folder also need to be updated with the shader code typed in Shdr's text editor. For this to happen, Shdr needs to write the content in its text editor to the shader files in the processing sketch folder. Essentially this should happen automatically whenever Shdr detects a change in code and the shader recompilation is successful. But to avoid running into complications I first decided to implement this using a button click in order to make sure that Shdr was able to save its contents to an external file. 

Since Shdr uses Ace.js as its default text editor, I started off by searching how to save the contents of Ace editor to a text file and found this helpful link. Then I proceeded to write a function in App.js that would save the editor contents to a file whenever it detects a click event from a button on the Shdr's interface. However after a few unsuccessful attempts I found out that there was already a save function in App.js that saved the shader code to Shdr's local storage(only accessible within the application). I then added the code for saving inside that save function. 

The saveFile function gave an error as first as it belonged to the FileSaver.js file that had to be manually downloaded to Shdr-master\sources\shdr and also included in the editor html as a .js source file. I then tested this by running Shdr. After making some changes in the code I clicked the save button icon in the top left corner. A new window opened asking for where to save the file. The name and type of the file was provided manually.

GLSL Editor

Weekly Report 7