Writing and Using Shaders in Babylon.js
Being that shaders are defined using plain text, there are a lot of different ways to store and load shaders in a project. We’ll review some of the ways to accomplish this after we learn a bit about how shader code is structured. The Create Your Own Shader (CYOS) tool is the shader equivalent of the Babylon.js Playground and is just one way to write shader code for Babylon.js. Navigating to the CYOS URL at https://cyos.babylonjs.com shows the shader code on the left pane and a live preview of the output on the right:
Figure 11.4 – The Babylon.js Create Your Own Shader tool functions similarly to the BJS Playground
In the preceding screenshot, you can see that the shader code is defined for vertex and fragment shaders in the left-hand pane, while a live preview shows on the right. Starter templates can be selected from the dropdowns, along with different meshes to use in the preview.
Just like the Playground...
