


They consist of the same vertex positions, yet look totally different when rendered. Vertex NormalĬonsider the two models above. To make models look actually good when rendered, there are a couple more things that need to be provided to the renderer. If you know the exact coordinates of three points in space, you would have all the information you need to draw a simple triangle between them. It is the position in 3D space, represented by a 3D vector of coordinates. Position is the most intuitive property of a vertex. There are three most common properties attached to vertices. Each triangle is represented by three vertices, for each of the corners of the triangle. The first thing you would need to understand is how 3D models are represented. The final code is available for you to fork and play around with. You will see the most common thing that is done, which is showing and moving 3D objects in an empty space. Our goal is to give a short introduction to all the key concepts behind rendering 3D graphics and using WebGL to implement them.

Knowing the principles of graphics rendering allows you to use such features. Libraries can also have advanced features, like ShaderMaterial in three.js. Every instruction removed from such a procedure means that a weaker graphics card can handle your content without problems.Įven if you decide to use a high-level graphics library, having basic knowledge of the things under the hood allows you to use it more effectively. The renderer can cause certain procedures to run millions of times on the graphics card.
