Revision 1039436 of Explaining basic 3D theory

<p>When it comes to the most basic 3D theory, it's all about shapes in a 3D space using the coordinate system to calculate it's position.</p>

<h2 id="Coordinate_system">Coordinate system</h2>

<p><img alt="Right hand coordinate system (x, y, z) with a blue cube." src="https://mdn.mozillademos.org/files/12974/coordinate-system.png" style="height:450px; width:600px" /></p>

<p>WebGL uses the right-hand coordinate system - the <code>x</code> axis is pointing to the right, <code>y</code> axis up and the <code>z</code> axis out of the screen - see the image above. It is a counter-clockwise system with the Cartesian coordinates.</p>

<h2 id="Rendering_pipeline">Rendering pipeline</h2>

<p>Rendering pipeline is the process of preparing images and outputting them on the screen. The graphics rendering pipeline takes the 3D objects built from <strong>primitives</strong> described using <strong>vertices</strong>, apply processing, calculate the <strong>fragments</strong> and render them on the 2D screen as <strong>pixels</strong>.</p>

<p>All the shapes are built from <strong>vertices</strong>. Every vertex is described by these attributes:</p>

<ul>
 <li><strong>Position</strong> identifies it in a 3D space (<code>x</code>, <code>y</code>, <code>z</code>)</li>
 <li><strong>Color</strong> holds an RGBA value (alpha for transparency, ranged from <code>0.0</code> to <code>1.0</code>)</li>
 <li><strong>Normal</strong> is a way to describe the direction the vertex is facing</li>
 <li><strong>Texture</strong> is the 2D image that the vertex can use instead of a simple color</li>
</ul>

<p><strong>Primitive</strong> is an input to the pipeline, it's built from vertices and can be a triangle, point or line.</p>

<p><strong>Pixel</strong> is a point on the screen arranged in the 2D grid, and holds an RGB color.</p>

<p>Fragment is a 3D projection of the pixel, and has all the pixel attributes.</p>

<h3 id="Objects">Objects</h3>

<p>A face of the given shape is a plane between vertices. For example, a cube have 8 different vertices (points in space) and 6 different faces, each constructed out of 4 vertices. Also, by connecting the points we're creating the edges of the cube. The geometry is built from a vertex and the face, while material is a texture, which uses an image. If we connect the geometry with the material we will get a mesh.</p>

<p>Rendering pipeline consists of vertex and fragment processing. They are programmable - you can <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders">write your own shaders</a> that manipulate the output.</p>

<h2 id="Transformation_matrix">Transformation matrix</h2>

<p>Vertex processing is all about transforming the coordinates and projecting them on the screen. A transform converts a vertex from one space to another, and is done by multiplying the vector with the transformation matrix.</p>

<p>There are four stages of that processing: arranging the objects in the world (called world or model transformation), positioning and setting the orientation of the camera (view transformation), defining the camera settings (projection transformation) and outputting the image (viewport transformation).</p>

<h3 id="Model_transformation">Model (world) transformation</h3>

<p>Objects are drawn in local space, so they need to be transformed to be drawn in the global, world space. It is done with the affine transforms - for example the rotation and scaling belong to the linear transformation, while translation is not linear.</p>

<h3 id="View_transformation">View transformation</h3>

<p>View transformation is about placing the camera in the 3D space. The camera have three parameters: location, direction it points at and orientation. The vew matrix is used to transform the camera space to the world space.</p>

<h3 id="Projection_transformation">Projection (perspective) transformation</h3>

<p>Projection sets up what can be seen by the camera - the configuration includes field of view, aspect ratio and optional near and far planes. Objects outside of the view are not visible, and are ignored in the rendering process to boost performance. If an object is partially visible it is clipped to the camera's visible area. Projection transforms individual vertices.</p>

<h3 id="Rasterization_transformation">Rasterization (viewport) transformation</h3>

<p>Rasterization converts primitives to a set of fragments and maps them to the 3D viewport.</p>

<h2 id="Fragment_processing">Fragment processing</h2>

<p>Fragment processing focus on textures and lightning. It calculates final colors based on the given parameters.</p>

<h3 id="Output_manipulation">Output manipulation</h3>

<p>During the output manipulation we can take an advantage of using z-buffer, or depth-buffer. Removing everything that is not visible because it was hidden behind another object can greatly increase the performance.</p>

<p>If one object is in front of the other and it's not entirely opaque (the material have transparency), the object behind it have to be rendered with that in mind - alpha blending can be used to calculate the proper colors of the objects in this situation.</p>

<h3 id="Lightning">Lightning</h3>

<p>The color we see on the screen is a result of the light source interacting with the surface's color of the object's material. Light might be absorbed or reflected. The standard Phong Lightning Model implemented in WebGL have four basic types of lighting:</p>

<ul>
 <li>Diffuse is a distant directional light, like the sun</li>
 <li>Specular is a point light, just like a light bulb in a room or a flash light</li>
 <li>Ambient is the constant light applied to everything on the scene</li>
 <li>Emissive is the light emitted directly by the object</li>
</ul>

<h2 id="Conclusion">Conclusion</h2>

<p>Now you know the basic theory behind 3D manipulation. If you want to move on to practice and see some demos in action, follow up with the tutorials below:</p>

<ul>
 <li><a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Building up a basic demo with Three.js</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Building up a basic demo with Babylon.js</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">Building up a basic demo with PlayCanvas</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Building up a basic demo with A-Frame</a></li>
</ul>

<p>Go ahead and create some cool cutting-edge 3D experiments yourself!</p>