This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.
Learn about everything there is to know about WebGL & 3D Development. A step by step process is used to explain every facet of these topics.
NOTE: This course includes information on web programming, design, OOP, JavaScript!
Gain a good understanding of the following concepts with this course:
-
What WebGL is?
-
Web Certifications
-
How to develop websites/applications using WebGL & JavaScript for online 3D rendering
-
Features of the WebGL language
-
Coding semantics
-
Application programming
-
Website programming
WebGL is one the most popular graphics API’s in the world. It is requested by all companies such as Google, Facebook and Microsoft for development. It powers Facebook and many other popular websites. This course will ensure you are not left out as more and more companies request this awesome and powerful language. This course will teach you everything about programming WebGL applications.
You will receive all the knowledge to use and leverage the powerful technology behind these amazing and wonderful platforms.
Over 475,000 students have enrolled on my courses and all of them are extremely satisfied. You will also be satisfied with this course. If you do not like the course, remember that within 30 days you can request a full refund. I guarantee you satisfaction.
If you have any questions regarding the topics covered in this course, please feel free to ask. I’m always happy to help those who want to learn.
To summarise this is what you get:
• Lifetime access to HD quality videos. No monthly subscription. Learn at your own pace, whenever you want.
• All videos are downloadable. Learn wherever you want, even without an internet connection!
• Downloadable starter code and final code for each section.
• Free helpful support in the course Q&A when you have questions or get stuck.
• Multiple coding challenges to practice your new skills (solutions included).
Sounds great? Then start this adventure today by clicking the “Take this course” button, and join me in the only WebGL Programming course that you will need!
Drawing Objects
-
1WebGL vs OpenGL vs OpenGL ES
OpenGL is a desktop computer-centric API (like Direct3D). WebGL is derived from OpenGL ES 2.0 (intended for mobile devices) which has less capabilities and is simpler to use. WebGL is also designed to run in a browser, and has therefore a few limitations more than OpenGL ES 2.0.
-
2Setup Server (Mac, Windows and Linux)
A local development environment allows you to setup a server environment on your own machine, instead of using the server environment provided by your hosting company.
-
3Setup WebGL Project
WebGL enables web content to use an API based on OpenGL ES 2.0 to perform 2D and 3D rendering in an HTML canvas in browsers that support it without the use of plug-ins. WebGL programs consist of control code written in JavaScript and shader code (GLSL) that is executed on a computer's Graphics Processing Unit (GPU). WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.
-
4Quiz - Introduction
Time for the first quiz of this course.
Colours and Textures
-
5WebGL Rendering Pipeline
WebGL enables web content to use an API based on OpenGL ES 2.0 to perform 2D and 3D rendering in an HTML canvas in browsers that support it without the use of plug-ins. WebGL programs consist of control code written in JavaScript and shader code (GLSL) that is executed on a computer's Graphics Processing Unit (GPU).
-
6Drawing A Point
Learn how to draw a point in WebGL.
-
7Normalised Coordinates vs Device Coordinates
Normalised Device Coordinates (NDC) Normalised device coordinates (NDCs) make up a coordinate system that describes positions on a virtual plotting device. The lower left corner corresponds to (0,0), and the upper right corner corresponds to (1,1).
-
8Drawing A Simple Triangle
Learn to draw a simple triangle in WebGL using the foundation we have already built.
-
9Drawing A Line Using gl.LINES
Draws lines between each pair of vertices passed. If you pass four vertices, A, B, C and D, two lines are drawn: one between A and B, and one between C and D. To set up the screen for drawing in 2D, use GL.
-
10Drawing A Line Using gl.LINE_STRIP & gl.LINE_LOOP
Line strip - Draws lines between each vertex passed, from the beginning to the end. If you pass three vertices, A, B and C, two lines are drawn: one between A and B, and one between B and C.
Line loop - Draws connected lines on screen. The last vertex specified is connected to first vertex.
-
11Drawing A Triangle With Lines Using gl.TRIANGLE_STRIP & gl.TRIANGLE_FAN
GL_TRIANGLES - Draws triangles on screen. Every three vertices specified compose a triangle.
GL_TRIANGLE_STRIP - Draws connected triangles on screen. Every vertex specified after first three vertices creates a triangle.
GL_TRIANGLE_FAN - Draws connected triangles like GL_TRIANGLE_STRIP, except draws triangles in fan shape.
-
12Drawing A Quad
Learn how to draw a quad using triangles.
-
13Drawing A 3D Cube
Learn to draw a 3D cube
-
14Setup Three.js
Three.js is a cross-browser JavaScript library and Application Programming Interface used to create and display animated 3D computer graphics in a web browser. Three.js uses WebGL.
-
15Loading & Drawing A Model Using Three.js
3D models are available in hundreds of file formats, each with different purposes, assorted features, and varying complexity. Although three.js provides many loaders, choosing the right format and workflow will save time and frustration later on.
-
16Drawing Objects
Time to test your knowledge on drawing objects
Moving & Transforming Objects
-
17Applying Color To Shapes
In WebGL, objects are built using sets of vertices, each of which has a position and a color; by default, all other pixels' colors (and all its other attributes, including position) are computed using interpolation, automatically creating smooth gradients.
-
18One Color Per Triangle
Learn how to apply a different color to each triangle.
-
19One Color Per Vertex Using Interpolation
Learn how to apply a color to each vertex and interpolate the color beautifully across the planet.
-
20Applying A Texture To Shapes
A texture is an WebGL Object that contains one or more images that all have the same image format. A texture can be used in two ways: it can be the source of a texture access from a Shader, or it can be used as a render target.
-
21Texture Coordinates
Texture coordinates, also called UVs, are pairs of numbers stored in the vertices of a mesh.
These numbers are often used to stretch a 2D texture onto a 3D mesh, but they can be used for other things like coloring the mesh (see Vertex color), controlling the flow across the surface (see Flow map), etc.
Game engines commonly use two texture coordinates, U and V, for mapping the width and height of a texture. A third axis W can also be used for depth if you are using a 3D volume texture, but usually this coordinate is removed for efficiency.
Texture coordinates are measured in a scale of 0.0 to 1.0, with 0.0 and 1.0 at opposite sides of the texture. When a model has a UV distance greater than 1 (for example, UV goes from -1 to 2) then the texture will tile across the model.
These numbers are usually hidden from the artist, replaced by helpful visual representations of how the textures are projected. Planes, cylinders and spheres help the artist align the textures in a visual way, but it helps to know that games only see the UV numbers that these shapes create.
-
22Quiz - Colours and Textures
Time to test your knowledge on the colours and textures
Movement & Camera
-
23Moving Objects Using Translation
Let's learn about moving objects using translation.
-
24Left Handed vs Right Handed Coordinate System
WebGL uses the right handed coordinate system by default, that is, X goes to the right, Y goes up and Z goes out of the screen. After projection it is left handed, but that has something to do with how the depth buffer is organised and normally you need not be concerned with it.
-
25Sizing Objects Using Scaling
Scaling is just about increasing or decreasing the size of an object. Let us see an example, if a triangle has vertices of the size [a,b,c], then obviously a triangle with the vertices [2a, 2b, 2c] will be double the original size. Thus, to scale a triangle, we need to multiply each vertices with the scaling factor. We can also scale a particular vertex.
For suppose, to scale a triangle using vertex shader of the program, we need to create a uniform matrix and then multiply the coordinate values with this matrix. Further, we pass a 4×4 diagonal matrix having the scaling factors of x,y,z coordinates in the diagonal positions ( as it is the last diagonal position 1).
-
26Orienting Objects Using Rotation
See Drawing A 3D Cube Lesson for rotation.
-
27Combining Transformations
Transformations can be combined by doing one transformation and then another. The three transformations that can be combined are scaling, rotation and translation.
-
28Quiz - Moving & Transforming Objects
Time to test your knowledge on moving & transforming objects.
Lighting & Shading
-
29Mouse Input
The MouseEvent interface represents events that occur due to the user interacting with a pointing device (such as a mouse). Common events using this interface include click, dblclick, mouseup, mousedown.
MouseEvent derives from UIEvent, which in turn derives from Event. Though the MouseEvent.initMouseEvent() method is kept for backward compatibility, creating of a MouseEvent object should be done using the MouseEvent() constructor.
-
30Keyboard Input
KeyboardEvent objects describe a user interaction with the keyboard; each event describes a single interaction between the user and a key (or combination of a key with modifier keys) on the keyboard. The event type (keydown, keypress, or keyup) identifies what kind of keyboard activity occurred.
-
31Fixing Rotation and Adding Individual Rotation
Lets fix rotation and adding individual rotation.