Displaying images and other flat shapes in web pages is very easy. However, when it comes to displaying 3D shapes, things become less easy because 3D geometry is more complex than 2D geometry. To do this, you can use specialized technologies and libraries such as WebGL and Three.js. However, if you just want to display […]
Tag: webgl
WEBGL Special Topic-3D Special Effects-Drawing Wave Points
In this WebGL topic, we will learn how to use WebGL to create a 3D wavy point effect. We will use vertex and fragment shaders along with WebGL buffer objects and textures to create this effect. First, we need to define a triangle mesh and calculate the value of a wave function at each vertex. […]
Dynamic graphics effects implemented by WebGL2 Shader
Article directory Preface renderings Create canvas and WebGL context Set page title and style Define device pixel ratio and window resizing functions Write source code for vertex shader and fragment shader Compile shader functions and create programs Initialize vertex data and buffers Define mouse event handling objects and functions Complete code Summarize Foreword This article […]
cesium webgl2.0 shader various functions used
1. Functions related to angles The following is a function related to angles, and we are all familiar with their usage. Function Parameters Description sin(x) radians sine function cos(x) radians Cosine function tan(x) radians tangent function asin(x) radians arcsine function acos(x) radians arccosine function atan(x) radians arctangent function radians(x) Angle Convert angle to radians degrees(x) […]
Unity (WebGL) stitch screenshots and save them locally, download PDF
Table of Contents 1. Call the code 2. Screenshot puzzle code Screenshot reference: Unity3D partial screenshot, full screen screenshot, and UI screenshot three methods_unity screenshot_wildland dragon hunting blog-CSDN blog Document download: Unity WebGL generates doc and saves it to the local computer_unity webgl saves the file_The blog of catching dragons as pets in the wild-CSDN […]
[Unity] 3D Snake game production/WebGL local testing and project deployment
This article is the relevant details of the Unity3D Snake game from production to deployment. Project open source code: https://github.com/zstar1003/3D_Snake Trial link: http://xdxsb.top/Snake_Game_3D Effect preview: The content in the trial link will be slightly different from this rendering, which will be explained in detail later. Game rules Classic snake game: The snake’s body continues to […]
WebGL response context loss solution
Table of Contents Response context lost How to respond to context loss context events Sample program (RotatingTriangle_contextLost.js) Response context lost WebGL uses the computer’s graphics hardware, and these resources are managed by the operating system and shared by multiple applications, including browsers. In some special circumstances, such as another program taking over the graphics hardware, […]
WebGL implements transparent objects (alpha blending)
Table of Contents alpha mix How to implement alpha blending 1. Turn on the mixing function: 2. Specify the mixing function Mixed function gl.blendFunc() function specification Constants that can be assigned to src_factor and dst_factor Calculation formula of mixed color additive mixing Translucent triangles (LookAtBlendedTriangles.js) Example effect Sample code Translucent three-dimensional objects (BlendedCube.js) Example effect […]
[WebGL Series] 2. Create Program object
Creation of WebGL program object The program object consists of Vertex Shader Object and Fragment Shader Object. Therefore, creating a program object involves two parts, one is the creation of the shader object and the other is the program Creation of objects. Overall process Create a vertex shader object Create a fragment shader object Create […]
WebGL initialization shader
Table of Contents Preface 7 steps to initialize shaders Create a shader object (gl.createShader()) gl.createShader() specification gl.deleteShader() specification Code specifying the shader object (gl.shaderSource()) gl.shaderSource() specification Compile shader (gl.compileShader()) gl.compileShader() specification? Edit gl.getShaderParameter() specification gl.getShaderInfoLog() specification Create program object (gl.createProgram()) gl.createProgram() specification Assign a shader object to a program object (gl.attachShader()) gl.attachShader() specification gl.detachShader() specification […]