Editing WebGL shaders on the fly using Firefox Developer Tools
Firefox 27 has a new tool - shader editor - which greatly simplifies their development. The editor shows all programs launched in the context of WebGL, makes it possible to edit them and immediately see the changes without any breaks in animations or loss of state.
If you've seen the HTML5 version of the Epic Stronghold from Epic Games, you're probably impressed with its incredible performance and detail. Most of the code that is responsible for what you see on the screen is written in the form of shaders, assembled into special shader programs that run directly on the video card and provide high performance visual effects.
')
Writing vertex and fragment shaders is an important part of developing 3D for the web, even if you use a special library. Epic citadel, for example, includes more than 200 shader programs. This is due to the fact that the rendering is sharpened and optimized for specific tasks in the application. Shader development is now inconvenient for several reasons:
The following screencast demonstrates changing the shader code using the example of a relatively simple demo:
Firefox 27 has a new tool - shader editor - which greatly simplifies their development. The editor shows all programs launched in the context of WebGL, makes it possible to edit them and immediately see the changes without breaking animations or losing state. Repeated shader editing does not affect WebGL performance.
The shader editor is not enabled by default, since not all pages use WebGL. However, it is easy to turn it on.
To try the shader editor in business, go to any WebGL demo and open the editor tab. You may need to reload the page to give the editor access to the WebGL context, after which you will see this picture (clickable):
Shader programs are written in GLSL and not in JavaScript. To learn how to work with the shader code, you can read various lessons (or in Russian somewhere here ). There is a hard compilation of lessons on the Learning WebGL blog. The shader editor gives you direct access to the code, so you can just experiment and see what this leads to:
More information about the shader editor can be found on the Mozilla website .
In conclusion, the second screencast demonstrating editing shaders on the fly in the epic citadel:
If you've seen the HTML5 version of the Epic Stronghold from Epic Games, you're probably impressed with its incredible performance and detail. Most of the code that is responsible for what you see on the screen is written in the form of shaders, assembled into special shader programs that run directly on the video card and provide high performance visual effects.
')
Writing vertex and fragment shaders is an important part of developing 3D for the web, even if you use a special library. Epic citadel, for example, includes more than 200 shader programs. This is due to the fact that the rendering is sharpened and optimized for specific tasks in the application. Shader development is now inconvenient for several reasons:
- You must restart the application to see your changes.
- Some shaders work only under special conditions.
The following screencast demonstrates changing the shader code using the example of a relatively simple demo:
Firefox 27 has a new tool - shader editor - which greatly simplifies their development. The editor shows all programs launched in the context of WebGL, makes it possible to edit them and immediately see the changes without breaking animations or losing state. Repeated shader editing does not affect WebGL performance.
How to enable shader editor?
The shader editor is not enabled by default, since not all pages use WebGL. However, it is easy to turn it on.
- By opening the toolbar with F12 or Ctrl / Cmd + Shift + I,
- Clicking a “gear” there to get into the options,
- And, finally, putting the birdie on the left opposite the shader editor. The editor tab will immediately appear in the toolbar.
How to use the shader editor?
To try the shader editor in business, go to any WebGL demo and open the editor tab. You may need to reload the page to give the editor access to the WebGL context, after which you will see this picture (clickable):
- The list of shader programs, the code of the corresponding vertex and fragment shaders with syntax highlighting in the right part is displayed on the left.
- The shader type is listed below the code editor window.
- Hovering a pointer to a program highlights in red all objects drawn using this program.
- By clicking on the eye to the left of the program, you can turn off the drawing of these objects (so that the author can concentrate on the drawing of other objects, or better consider the objects intersecting with them).
- When the toolbar is located on the side of the editor window, they are rearranged vertically.
How to edit shader programs?
Shader programs are written in GLSL and not in JavaScript. To learn how to work with the shader code, you can read various lessons (or in Russian somewhere here ). There is a hard compilation of lessons on the Learning WebGL blog. The shader editor gives you direct access to the code, so you can just experiment and see what this leads to:
- Editing the code of any shader causes it to be compiled and applied to the 3D scene as soon as the user stops pressing the buttons;
- A random error in the code will not break the rendering, the editor will simply show the error and highlight the corresponding line; by hovering over the red icon on the left, you can see the details of the error.
More information about the shader editor can be found on the Mozilla website .
In conclusion, the second screencast demonstrating editing shaders on the fly in the epic citadel:
Source: https://habr.com/ru/post/202046/
All Articles