YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

English subtitles

← Shader Inputs - Interactive 3D Graphics

Get Embed Code
2 Languages

Showing Revision 2 created 05/24/2016 by Udacity Robot.

  1. Once vertex and fragment shaders became available, all this changed. You can
  2. now program whatever functions you wanted. When you select a material and
  3. lighting, what the 3JS library does under the hood is create efficient vertex
  4. and fragment shader programs for you. However, you can create and modify your
  5. own materials by using 3JS's shading material. Vertex and fragment shaders have
  6. similar structures. You first define the inputs to the shader. There are 2
  7. kinds of declaration in 3JS, uniform and varying. In web GL itself, there are
  8. also attributes to a vertex shader, which are the values such as the vertex
  9. position normal and UV coordiinate data. These attributes are built in 3JS, so
  10. do not have to be declared. In fact, they have those exact names, position,
  11. normal, UV. Uniform data is whatever is constant for the triangle being shaded.
  12. For example, values such as the position of the light sources and the color and
  13. shininess of the material are uniforms. A value is labeled as varying if it is
  14. computed or set by the vertex shader as an output, and passed to the fragment
  15. shader as an input. The vertex shader outputs these values and then the
  16. rasterizer interpolates these across the triangle's surface. In other words,
  17. these values can and will vary per fragment. You're in total control of what
  18. gets interpolated. The more data per vertex that you want interpolated, the
  19. more time and resources it takes. Nothing comes for free. The fragment shader
  20. also takes uniform data as inputs. The fragment shader then, as a minimum,
  21. outputs a fragment color with the name GL frag color. I say as a minimum,
  22. because in fact, in many graphics APIs, the fragment shader can output to a
  23. number of images at one time. This is called MRT, for multiple render targets.
  24. Targets is another name for output images. Unfortunately, WebGL does not
  25. support this, yet. To summarize, here's 3JS's view of the world. A vertex
  26. shader has inputs that are uniforms and attributes. And always outputs a GL
  27. position, and can output varying values. The fragment shader takes these
  28. varying values along with whatever uniforms it wants, and outputs a GL.Frag
  29. Color.