The Extensive WebGL Series ! - Part1 : Low Level Graphics

Explore low-level graphics fundamentals, including GPU parallelism and the WebGL interface, and demonstrate math-backed tools like matrix-vector multiplication in browser-based JavaScript scenes.

Explore how matrices act as linear transformations, showing how a rotation matrix rotates 2d vectors by 90 degrees counterclockwise while preserving their magnitudes.

Explore how WebGL transforms objects from model space to world space via model, view, and projection matrices, projecting with perspective or orthographic projection and clipping to -1 to 1.

Learn how shaders drive WebGL rendering by using vertex shaders to transform vertices and fragment shaders to color fragments, feeding a GPU rendering pipeline from CPU prepared data.

Explore the development environment for the extensive webgl series part1 low level graphics, covering html structure and canvas, javascript basics, and running a local python server.

Begin the journey into low-level graphics by drawing a triangle on a canvas, setting up the canvas, assigning an id, and accessing the 2d context with JavaScript.

Define a triangle with three vertices (x, y, z), store them in a webgl vertex position buffer, bind the buffer, and upload the data to the GPU.

Learn to send per-vertex colors in WebGL by creating color and position buffers, binding them to the shader pipeline, and implementing vertex and fragment shaders for a colored triangle.

Learn how to combine WebGL objects by creating shader functions, compiling vertex and fragment shaders, and linking programs to render textured elements in JavaScript.

Learn how to locate the first attribute in a shader, and configure vertex data from buffers for position and color, including size, stride, and offset, to draw a triangle.

Configure a single buffer with triangle positions and colors, set up vertex attributes and program, and render the triangle in a requestAnimationFrame loop with clear color and proper vertex ordering.

learn how to render a cube in WebGL by composing six faces from triangles, managing 36 vertices and per-face colors, using buffers, and applying transformations.

Rotate the cube in WebGL by applying transformations with matrices, using uniforms for shared data, and combining projection, view, and model matrices to drive the animation.

Explore how translating in the z direction moves a rotating cube away from the camera, and why the order of translation and rotation matters in a right-handed matrix pipeline.

Render multiple cubes by reusing the same vertex data and varying each cube’s model matrix, then encapsulate the logic in a create cube function and explore instancing.

Explore instancing to render many identical objects efficiently by using per-instance colors and position offsets via uniforms, avoiding separate color buffers and extra draw calls.

Explore animating colors in WebGL shaders by mapping per-vertex colors via a uniform array and time-driven changes, sending current time from JavaScript to create dynamic effects.

Explore how the element array buffer uses an index buffer to draw triangles from unique vertices, reducing memory usage and data transfer.

Learn how textures map images onto 3d geometry with texture coordinates and interpolation, wrap textures around a cube, and manage texture buffers and image loading.

Upload the image to a texture and bind it to a texture unit in WebGL. Choose filtering options (nearest or linear) and consider mipmapping for distance-based detail.

Learn how to pass image data from the CPU to shaders, configure texture uniforms, and blend texture colors with vertex colors to render textured rotating cubes while handling image loading.

Fix uniform data flow in WebGL shaders to render textures correctly; flip textures for WebGL coordinates, compare linear and nearest filtering, and blend multiple textures using mix.

Unpack the mathematics of simulating a camera in a 3D scene, derive the view matrix from rotations and translations, and apply its inverse to world objects.

Define a 3d camera with position, view direction, and a third vector (up/right) to complete its basis, then derive a 4x4 rotation-translation matrix to place it in world space.

Master the camera math behind look-at matrices in WebGL, including inverses and orthogonal matrices. Learn to derive the view and right vector with cross products from a given view direction.

Move the camera with the keyboard by listening to keydown and keyup events, updating the camera position and target via the look at function for movement in the render loop.

Learn to rotate a WebGL camera with keyboard controls by adjusting the camera target to change view direction and keep the viewing direction consistent as you move.

Fix camera rotation by deriving a direction vector from yaw (yellow angle) and pitch. Compute its x, y, z components from these angles and set yaw negative and pitch zero.

Learn to rotate and move the camera in a WebGL scene by driving movement with the camera front vector and keeping the right vector perpendicular to the view plane.

Explore how ambient, diffuse, and specular components shape real-time lighting in WebGL, using color multiplication to simulate how object colors interact with colored light, including shadows and highlights.

Explore how to simulate light and color in WebGL by distinguishing light sources from light receivers, and refactor code to use separate cube objects and shaders for accurate lighting calculations.

Explore lamp shaders vs object shaders in WebGL, implementing ambient light values via uniforms into the fragment shader, and addressing transparency and blending.

Implement a light source in WebGL by creating vertex shaders for the light, configuring uniforms for color and position, visualizing light with a cube, and experimenting with ambient terms.

Learn how diffuse lighting in WebGL uses light direction and normals, via the dot product of light and normal, clamped with max(dot, 0) for per-vertex lighting and interpolation.

Transform normals with the model matrix, discarding translation, normalize the result, and compute ambient and diffuse lighting in the fragment shader; animate the light position and discuss non-uniform scaling.

Learn how normals transform under the model matrix using the inverse transpose normal matrix to keep shading correct for transformed edges, with notes on CPU vs GPU implementation.

Explore specular lighting computation from light position, surface normal, and viewer; implement a specular term using the view direction and reflection, and control shininess with an exponent.

Explore specular light using camera position and view, with uniforms carrying material and light properties to the shooter, and adjust ambient, diffuse, and specular colors, intensity, shininess, and range.

we conclude this coast with hope you gained the knowledge you sought and invite you to the next course on web game development with Babylon, covering single-player and multiplayer games.

Explore how homogeneous coordinates represent two-dimensional and three-dimensional points using a direction and a scale (w), revealing infinite representations of the same point in the computer graphics pipeline.

Reveal how homogeneous coordinates explain perspective projection, contrasting it with orthogonal projection, and show how dividing by w linked to y yields coordinates on the projection plane.

Construct and derive the perspective projection matrix to transform view-space points into clip space, then into normalized device coordinates via w-divide, while examining clipping and z-testing.

Derives the perspective projection matrix by substituting values, analyzing symmetry, and explaining view space to clip space transformations for a left-handed coordinate system.

Explore how the perspective projection matrix is implemented in code, using field of view, aspect ratio, and near and far planes to construct the 16 matrix components.