• Begin to understand native webGL from a mouse drawing point


    WebGL tutorials for the web front-end, the tutorials on the Internet are all based on the assumption of computer graphics, which is not very friendly to web developers, so this pit is opened final effect https://codepen.io/chendonmin… Mouse click draws a point. How webGL displays a point First of all, you need to know how webGL […]

  • Wind Field Visualization: Plotting Trajectories


    Primer learndraw particlesAfter that, move on to how to draw particle trajectories. source:webgl-wind Origin My GitHub draw track It is mentioned in the original post that the way to draw the trail is to draw the particles into a texture, then use that texture as a background (slightly darkened) on the next frame, and swap […]

  • Comparison between WebGL and WebGPU [8] – Summary and thoughts at the end of the series


    Postscript to the end of the series Lin Lin always wrote some articles to compare the conventional functions of WebGL and WebGPU. Maybe he is a bit amateurish in understanding the API, and even does not rule out that there are mistakes in the expression, but I hope that the correct part will inspire readers […]

  • Comparison of WebGL and WebGPU [7] – the destination of rendering


    1. Overview In fact, the comparison of the basic conventional APIs in the sixth article is almost finished (except for GPGPU and query APIs that are not involved), but there is one detail that is still worth thinking about and recording in a comparison article. is where to render. The context object of WebGL is […]

  • [live streaming] CG&WebGL&Threejs knowledge and learning thinking sharing.


    For a transcript transcript of a live share (It is recommended to watch the video), Video cloud disk linkThe whole article is mainly divided into several directions: Computer Graphics related WebGL related Threejs related Q&A not recorded yet Note that there may be slight differences between the following content and the live content. Computer Graphics […]

  • Wind Field Visualization: Random Reset


    Primer existdraw trackIn the effect, after a period of time, you will find that there are only a few fixed tracks left in the end.originalThis phenomenon is also mentioned in , and a solution is also provided. Personally, I still want to take a look at the source code. source:webgl-wind Origin My GitHub reason Over […]

  • JavaScript WebGL Matrix


    Primer I thought I could start trying 3D effects, but after checking the information, I found that I need to understand the matrix first. Collect the relevant basic knowledge points here. Origin My GitHub Introduction Simply put, a matrix is ​​a rectangular arrangement of numbers in rows and columns. Generally describe the row first and […]

  • Cesium 1.91 Changelog – MSAA and Native Promises are here


    Incompatible update In the next release, which is Cesium 1.92, third-party librarieswhen.jsWill be replaced by the native Promise API.Cesium.whenWill be deprecated and removed in the next version. For how to upgrade, please refer to the personal comment below, I reproduced the official guidance document. Fixed the get ray method of the camera object when the […]

  • What are the ways to visualize web front-end pages?


    With the continuous development of the Internet and technology, research on data visualization is in full swing in recent years. Data visualization not only conveys and communicates information clearly and effectively, but also has more and more applications in our entertainment life. The application of visualization has penetrated into our lives, and it can display […]

  • Write a rain animation with three.js


    I recently read the “Three.js Development Guide”, and I deeply realized that just watching and not practicing is almost the same as not watching, so I practiced and wrote this small animation. project address:https://github.com/alasolala/… Pre-knowledge WebGL allows us to develop 3D applications in the browser. However, it is quite complicated to program directly with WebGL. […]

  • Basic usage and concepts about WebGL (shaders, buffers, drawing methods, transformation matrices, etc.)


    Here, we will show you some simple instructions and basic usage of WebGL. Even if you use a third-party 3D rendering engine to draw later, the basic concepts here are still very beneficial or necessary. When demonstrating and illustrating, we choose to be based onimage3D.jsAs a dependency library, but since its plain syntax is almost […]

  • JavaScript WebGL 3D related concepts


    Introduction existJavaScript WebGL matrixAfter that, I found that there are still some concepts that need to be understood before realizing the three-dimensional effect, so I checked the information and integrated it according to my own habits. Origin My GitHub Homogeneous coordinates Three-dimensional coordinates are theoretically enough for three components, but when looking at the relevant […]