Table of Contents Select a surface Sample program (PickFace.js) Detailed code explanation gl.readPixels() see the effect on line 126 gl.UNSIGNED_BYTE Notes Example effect Select a surface ?WebGL Select Object_Hawthorn Tree’s Blog-CSDN Blog You can use the same method to select a certain surface of the object. In this section, the PickFace program is written based […]
Tag: webgl
WebGL HUD (Heads Up Display)
Table of Contents HUD (Heads Up Display) How to implement HUD Sample program (HUD.html) Sample program (HUD.js) Detailed code explanation Display three-dimensional objects above text on web pages Detailed code explanation HUD (Heads Up Display) Head-up display (head up display), referred to as HUD, was first used in aircraft driving. The head-up display projects some […]
WebGL uses mouse to control object rotation
Table of Contents Mouse controls object rotation How to achieve object rotation Sample program (RotateObject.js) Detailed code explanation Example effect Mouse controls object rotation Sometimes, WebGL programs need to allow users to manipulate three-dimensional objects through the mouse. This section analyzes the sample program RotateObject, which allows users to rotate three-dimensional objects by dragging (i.e., […]
[WebGL Series] 3. Obtain shader variable address and assignment
Get shader variable address and assignment The WebGL program object was created in the previous section. After the program object is created, the object contains a vertex shader and a fragment shader. The shader contains variables, and we need to assign values to them before drawing. The shader code is as follows: const VSHADER_SOURCE = […]
WebGL hierarchical model – single node model
Table of Contents A complex model composed of multiple simple models hierarchical model single joint model Hierarchy of models in the JointModel program Sample program (JointMode.js) Detailed code explanation Draw hierarchical models (draw()) program effect A complex model composed of multiple simple models When drawing a complex model composed of multiple small parts, the most […]
SuperMap iClient for WebGL loads ambient light maps in HDR format
Author: nannan Table of Contents Preface 1. The concept of ambient light map in HDR format 2. Ambient light map generation in HDR format 2.1 Photoshop generation 2.2 Format conversion (.psd->.hdr) 2.3 Format conversion (.hdr->.ktx) 3. Loading ambient light map in HDR format 3.1 Key code 3.2 Effect display Foreword In an environment where the […]
WebGL model view projection matrix
WebGL Perspective Projection_Hawthorn Tree’s Blog – One problem with the PerspectiveView code in the CSDN blog is that we use a long section of boring code to define all vertex and color data. There are only 6 triangles in the example. We can still manage this data manually, but if the number of triangles increases […]
WebGL calculates diffuse light color under point light source
Table of Contents point light Per-vertex lighting (interpolation) Sample program (PointLightedCube.js) Detailed code explanation Example effect Unnatural phenomena that occur when processing point light lighting effects on a vertex-by-vertex basis More Realism: Fragment-by-Fragment Lighting Sample program (PointLightedCube_perFragment.js) Detailed code explanation Point light Compared with parallel light, the light emitted by a point light source has […]
WebGL calculates the lighting effect of moving objects based on the inverse transpose matrix of the model matrix.
Table of Contents Preface Coordinate transformation causes normal vector to change Change pattern: Magic Matrix: Inverse Transposed Matrix Summary of usage of inverse transposed matrix Specifications of setInverseOf and transpose methods of Matrix4 objects (to complete the inversion of the matrix) Sample code (LightedTranslatedRotatedCube.js) Detailed code explanation Example effect Foreword As objects in the scene […]
WebGL draws a cube from 0 to 1
Table of Contents Preface The faces, triangles, vertex coordinates and vertex colors that make up the cube Draw objects by vertex index gl.drawElements(mode, count, type, offset) function specification Sample program Color Cube (HelloCube.js) Detailed code explanation Write the coordinates, color and index of the vertex to the buffer gl.ELEMENT_ARRAY_BUFFER Bind vertex index data target Detailed […]