1. Learning Background and Achievement
The Web has developed rapidly in the past ten years. With the popularity of WebGL, the performance of web pages has become more and more powerful. Many complex animations and exquisite effects can be made on web pages; 3d graphics of performance. With the performance of browsers and the substantial improvement of network and bandwidth, as well as the realization of WebGL, 3D technology is no longer a patent for desktop programs, and more and more external applications use 3D technology.
For example, for websites, the application of Web3d technology realizes the three-dimensional presentation of corporate websites, making corporate images more intuitive and more three-dimensional for customers, breaking the traditional flat display mode.
At present, the government has a large number of new infrastructure projects, such as digital twins, smart cities, smart parks, smart factories, smart fire protection, etc., all of which involve 3D visualization technology.
2. Column learning steps
This column mainly talks about how to systematically learn Web 3D visualization technology. threejs is a class library that allows users to start building webgl projects through javascript.
Learning webgl requires knowledge of graphics, and webgl needs to learn two languages: js and glsl. If we don’t use threejs directly to use webgl, we need to write it from the bottom. We need to fully understand the syntax of shaders and write it ourselves. Fixed-point coloring, etc. Using threejs can quickly escape the difficult bottom layer, especially for traditional front-end and js developers, it is difficult to directly challenge the shader.
Learning threejs mainly includes the following points:
1. Master the basic concepts of threejs: what is a point, line, surface, what is a geometry, what is a material object scene camera renderer, animation and controller these basic concepts;
2. Build a basic scene and 3D objects for a display
3. Debug the 3d code, go deep into the above basic concepts, and understand various attributes and concepts through the documents on the official website
4. The rendering effect of 3D effect is more realistic. To understand in detail what is pbr (rendering based on the principle of physical lighting), you need to master what is environment map, bump map, displacement map, what is radiation light, etc.
5. Scene interaction, such as selecting an object to move, mainly learning how to master the physics engine so that the object has real physical effects, such as the interaction of objects such as gravity, rebound, and friction.
6. Finally, enter the magical world of webgl, master the language control of coloring technology, and use GPU to render. Master how threejs uses the bottom layer to encapsulate webgl. Learn webgl to use shaders, etc. Understand the principle of the entire graphics rendering to draw the object scene.
7. The whole scene is processed in the later stage, such as creating strange pictures, old pictures, underwater pictures and other effects.
8. Case study, such as how to obtain architectural data and generate architectural framework to form a realistic digital city effect
9. Learn blender modeling technology, compress and optimize the provided architectural models, use blender to create various animation effects