WebGL internals

Learn how to draw shapes in WebGL shaders using vertex coordinates from -1 to +1, create a triangle, and encapsulate code into a library for rectangles, lines, points, and circles.

Master the WebGL internals by using HTML5 and JavaScript to access the canvas, obtain the WebGL context, and write your own shaders without libraries.

Access the public git repository at GitHub.com/subhasishdash/webglinternals to explore WebGL internals, host it with any http or web application server, and share feedback via Udemy chat.

Explore the WebGL coordinate system with origin, x and y axes, and how to render shapes from triangles to circles within -1 to 1 coordinates using shaders.

Create and render a triangle in WebGL by writing vertex and fragment shaders, configuring precision, linking a program, and drawing with proper coordinates.

Learn how to implement encapsulation by building a reusable utility module in JavaScript that centralizes context creation, common operations, and parameter handling to reduce duplication.

Render a green rectangle by splitting it into two triangles, using coordinates from the bottom left toward the center, and implement vertex and fragment shaders to draw it in WebGL.

Learn how to render a circle in WebGL by computing circle coordinates with trigonometry, and render it using either lines or points while handling center, radius, and canvas size.

Explore dynamic rendering in WebGL with mouse-driven drawing of shapes—lines, points, circles—using dynamic vertices, while detailed explanations of vertex shaders build a base for games and ai.

Draw a rectangle dynamically by mapping mouse x and y to its top-left and bottom-right corners, then render it as two triangles while handling mouse events.

Clean up prior code, draw a rectangle, and apply encapsulation with JavaScript callbacks. Move utilities, remove globals, and drive a fragment shader with a uniform color (r,g,b,a).

Learn to dynamically render free-drawn points in a WebGL context by setting up canvas, shaders, and uniforms, and enabling continuous, colored point drawing from top to bottom.

Learn to dynamically render lines in WebGL by setting up a program, buffers, and shaders, and passing uniforms for start and end positions and color to draw lines in directions.

Explore webgl internals by dynamically rendering circles: compute center and radius from mouse coordinates, generate 360-degree points, and render via a fragment shader and program setup.

Learn to grow complex shapes in WebGL by extending dynamic drawing of rectangles, circles, and points to render analog and digital clocks, a country flag, and fragmentation, using textures.

In this lecture on WebGL internals, render the Indian flag by drawing a central line, three colored rectangles, and a circle with a 24-spoke chakra using simple shape primitives.

Learn to render a country flag in WebGL by composing rectangles, a circle, and lines with specific coordinates, centers, and colors such as blue and green.

Finish the rendering of an analog clock in WebGL by drawing hour, minute, and second lines and updating them every second.

Explore drawing unlimited grids in WebGL by rendering multiple colored groups from a single input, building per-rectangle vertex data, shaders, and buffers to form chessboard patterns.

Master textures in WebGL internals by learning texture handling, fragments, sending textures, rendering multiple textures, and implementing pan zoom with mouse while maintaining aspect ratio.

Send a texture from the CPU to the GPU by loading an image as a texture. Define vertex and texture coordinates, bind shaders, and configure min filters and wrap modes.

Learn how to blend two textures in WebGL using the mix function, assign texture indices, and control the blend with a weight parameter to create a combined image.

Moving a texture in WebGL by tracking mouse events, converting canvas coordinates to GL coordinates, computing deltas, updating texture coordinates, and handling mouse up to fix positions.

Learn how to maintain a texture’s aspect ratio in WebGL by computing image and canvas aspect ratios, selecting proper height or width fitting, and adjusting coordinates for accurate rendering.

Render an image in an HTML5 canvas using the 2D context, apply grayscale image processing, and compare performance with WebGL canvas to reveal rendering techniques.

Apply grayscale conversion and inverse to a texture on the cpu by looping over image data and updating pixels with a single gray value.

Learn to implement grayscale and inverse effects on a texture using WebGL, update textures with floating-point values, and observe fast GPU shader performance timings.

Apply kernels on a texture to perform image processing in WebGL internals, using 3x3 (and larger) neighbor matrices for edge enhancement and pixel-wise averaging.

Explore how an edge enhancement kernel is applied in WebGL internals, adjusting coordinates and parameters to sharpen images and observe the resulting changes in real time.

Apply a color palette via a LUT in WebGL by mapping image values from 0.0 to 1.0 through a palette texture and fragment shader lookups.

Learn what a viewport is and how to render data in a portion of the canvas, including multiple viewports, and discover why the drawing buffer should be preserved in WebGL.

Explore how the viewport controls rendering regions in WebGL by dividing the canvas into four colored rectangles: bottom-left, bottom-right, top-left, and top-right, with start and size parameters.

Explore WebGL internals by learning why frame buffers are essential, the problems without them, and how draw buffers enable multiple image processing and final rendering to a canvas.

Learn how framebuffers reserve memory for textures, render in the background, and bind textures to framebuffers before outputting to the main canvas.

Explore webgl internals by examining problems that arise without framebuffers when applying grayscale, inverse, or color palette on images, and learn how framebuffers enable multiple image processing pipelines.

Explore how to implement frame buffers in WebGL internals by creating and binding frame buffers, textures, and attachments, then render to the canvas.

Learn to implement multiple image processing in WebGL with a ping-pong framebuffer setup and texture management. Refactor code to handle uniforms and framebuffers for sequential rendering of filters.

Explore how to implement multiple image processing in WebGL internals with frame buffers and ping-pong rendering, manage viewport and screen clears, and apply grayscale and inverse effects.

Connect with the instructor via LinkedIn, Skype, or email to ask questions, share feedback, and wish you success after completing the WebGL internals bonus lecture.