- Real-Time 3D Graphics with WebGL 2
- Farhad Ghayour Diego Cantor
- 326字
- 2021-06-10 19:43:08
Time for Action: Updating Uniforms in Real Time
Let's cover an example of how we'd update shader uniforms interactively:
- Open the ch03_01_goraud_lambert.html file in your browser:
- Notice that in this example, the controls widget is at the top right of the page. If you're curious about how it works, you can check the initControls function inside of the example code.
The Settings Widget
The settings widget was created using DatGui , an open source library. While we won't cover the intuitive DatGui API, it may be useful to read the documentation and the code in the provided examples to see how it works. For more information, you can check out https://github.com/dataarts/dat.gui.
The settings widget was created using DatGui , an open source library. While we won't cover the intuitive DatGui API, it may be useful to read the documentation and the code in the provided examples to see how it works. For more information, you can check out https://github.com/dataarts/dat.gui.
- Translate X, Y, Z: These control the direction of the light. By changing these sliders, you will modify the uLightDirection uniform:
- Sphere Color: This changes the uMaterialDiffuse uniform, which represents the diffuse color of the sphere. Here, you use the color selection widget, which allows you to try different colors. onChange of Sphere Color in the initControls function receives the updates from the widget and updates the uMaterialDiffuse uniform.
- Light Diffuse Color: This changes the uLightDiffuse uniform, which represents the diffuse color of the light source. There is no reason why the light color must be white. We achieve this by assigning the slider value to the RGB components of uLightDiffuse while we keep the alpha channel set to 1.0. We do this inside the onChange function under the lights settings, which receives the slider updates.
- Try different settings for the light source position, the diffuse material, and light properties.
What just happened?
We’ve seen an example of a simple scene illuminated using Goraud interpolation and a Lambertian reflection model. We have also seen the immediate effects of changing uniform values for the Lambertian lighting model.