Infographics

Page 7

WebGL Lighting Diagrams

The WebGL & Normals with WebGL & Lighting: Vector Diagram explain lighting concepts with images. The WebGL & Normals graphic demonstrates the power of GPU, GLSL shading. The WebGL & Lighting: Vector Diagram illustrates how the subtraction vector applies to process the dot product. Read more information below.

WebGL & Normals Texture, Vertex Shader & Skylab Output

WebGL Lighting Vector Diagram

Infographics - Diagrams, Graphs, Charts

Infographics use charts, graphs, callouts, colors and images to convey concepts visually. Infographics are a form of technical illustration; often using cutaways, arrows with labels, exploded views, detail views, three dimensional or two dimensional images and blueprints to help viewers understand new ideas.

WebGL & Normals Information

The Skylab graphic's very simple texture map displays in the lower left corner. The vertex shader, in the lower right corner, processes normal data. The output renders the highlighted texture map to a Skylab in the top graphic.

WebGL & Lighting: Vector Diagram

The subtraction vector is the difference between the vertex vector, or normal, and the angle of light. The dot product returns a value between 0.0 and 1.0. Multiply a mesh's color by the dot product value to render lighting. Values closer to zero are darker. Values closer to one are brighter.