Front-end graphics and front-end architects are the two key directions of the current front-end, and the current market is short of talent.

Getting into the world of 3D graphics can be very daunting. Whether you want to create an interactive 3D logo or design a full-fledged game, if you don’t understand how 3D rendering works, you’ll get bogged down in using abstracted libraries.

Using libraries is probably the right thing to do, and JavaScript has an amazing open source library called three.js. However, there are some disadvantages to using a prefabricated solution:

  • They have a lot of features you don’t use. The simplified version based on the three.js feature is about 500kB in size, and any additional functionality (for example, loading model files) will make the payload even larger. Transferring so much data just to display a rotating logo on your site would be a waste.
  • The extra layer of abstraction can make an already tedious maintenance task even more difficult. You can create directly as objects on the screen, or you can spend dozens of hours merging your work into the abstraction of the library.
  • Although libraries are well optimized for the most part, they can help you cut out a lot of bells and whistles. The renderer may need to run specific program operations millions of times on your video card. If you want to process your content with no problem on a low-performing video card, that means removing some processing instructions from those operations.

Even if you plan to use an advanced graphics library, knowing the basics will allow you to use it more effectively. Libraries can also have advanced features, such as ShaderMaterial in three.js. Understanding how graphics render works will help you open up new worlds.

Our goal is to learn all the key concepts behind rendering 3D graphics and be able to implement them using WebGL. You will master them through the most commonplace.

Represents a 3D model

The first thing you need to know is how to represent 3D models. The model is made up of many triangular meshes. Each triangle is represented by three vertices to which three of the most common attributes are attached.

Vertex positions

Position is the most intuitive property of vertices. It is a position in 3D space, represented by a 3D vector of coordinates. If you know the exact coordinates of three points in space, you can determine all the information needed to draw a simple triangle between them. To make the model look realistic when rendered, you need to provide more to the renderer.

Vertex normals

Let’s look at the two models above. They are made up of the same vertex positions, but render completely differently. What’s going on here?

In addition to telling the renderer where the vertices are, it also needs to tell it how the surface is tilted at that point. This is the surface normal at a particular point on the model, represented by a 3D vector. The following diagram depicts how it is handled.

The figure above corresponds to the two spheres in the previous figure. The red arrows show the normals specified for vertices, and the blue arrows show how the renderer’s normals should evaluate all other points between vertices. Although the diagram is in 2D form, its principles apply to 3D graphics.

Normals are an aid in calculating the reflection of a light on a surface. The closer the light is to the normal, the brighter it is. A change in the direction of the light will cause the light to change. Although there is a sudden change at the vertex of the model, the Angle between the light and the normal should change gradually, so the lighting effect in the rendering should be gradual.

Texture coordinates

The last important attribute is texture coordinates, often referred to as UV maps. Suppose you have a model and a texture that you want to apply to it, and the texture has various areas that represent the image of the different parts of the model that we want to apply to. There must be a way to mark where the texture should be attached to the model. This is where texture mapping comes in.

Load the OBJ model

The OBJ file format is very simple and only takes a few lines of code to implement. Believe it or not, that’s all you need to do to create a simple model loader.

Perform spatial transformation

In the model we’re loading, all points are related to their coordinate system. To transform, rotate, and scale a model, all we need to do is perform a spatial transformation on its coordinate system.

Schematic diagram of conversion process

Schematic diagram of scaling process

Rotation process diagram

Camera Angle

This is a key part of rendering objects on screen: the camera. The camera has two key points: 1. Location. 2. How it projects its observations onto the screen.

Camera position can be handled with a simple trick. There is no difference between moving the camera one meter forward and moving the world one meter back. This can be done by matrix operations.

The second key point is the way the object being viewed is projected onto the lens. In WebGL, everything visible on the screen is in a box. Everything visible is in a box. You can use the same matrix transformation method to create a projection matrix.

The simplest projection is the orthographic projection. You take a box in space, and assume that its center is at zero in the stereo coordinate system. Then resize the box to fit the box described earlier, and WebGL can view objects in it.

Draw objects using WebGL graphics pipes

The simplest surface you can draw is a triangle. In fact, most of what you draw in 3D space contains a lot of triangles.

Here are the concepts you need to know:

  • Default frame buffer
  • Vertex buffer object
  • shader
  • Vertex shader
  • Fragment shader

A few more steps are required:

  • Draw the model
  • Add light
  • Add texture

Finally, we get what we want:

That’s what I want to share with you today. I believe you have some new feelings about the front end.

The above content is selected from my special course “front-end graphics development Practice Guide”, which is just the tip of the iceberg of this course.

If you are interested, you can pay attention to jingchengyideng public account, backstage reply “1”, sign up for free audition activities.