Three.js to achieve parabolic dynamic flow effect

Three.js to achieve parabolic dynamic flow effect Old rules, let's first look at the final effect. This effect may be used in the demonstration from the beginning to the end of the aircraft route, the demonstration of missile launch trajectory effect and other scenes. After mastering the idea, the effect is very simple. There are actually two ...

Added by M2tM on Wed, 09 Mar 2022 17:28:05 +0200

Metaballs analysis and application (2D metaball fusion)

I Metaball definition Metaball technology is a technology developed by Blinn in 1982, which is suitable for building deformable surfaces. This technology uses metaball to establish an energy field, and then establishes a 3D model through the equipotential surface in the scalar domain to represent the software or implicit surface. Simply put, i ...

Added by dancer on Mon, 21 Feb 2022 04:33:36 +0200

Wind farm visualization: wind farm data

Introductionunderstand WebGL Basics After that, I went to see the logic of obtaining and analyzing wind farm data, and encountered problems again.System: MacOSVersion: 11.6OriginMy GitHubInstalling ecCodesIn the article Sample source library In the instructions, first install ecCodes and try to use HomeBrew, but it doesn't work. So according to ...

Added by webchef on Sun, 20 Feb 2022 09:21:52 +0200

Comparison between WebGL and WebGPU [4] - Uniform

As we all know, when GPU runs programmable pipeline, shaders run in parallel, and each shader entry function will be executed in parallel in GPU. Each shader charges a large piece of data in a unified format, reflecting the advantages of GPU multi-core, which can process data with small cores at the same time; However, some data is the same for ...

Added by lynx2003 on Sat, 19 Feb 2022 13:50:26 +0200

Buffer mapping mechanism in WebGPU

1. What is buffer mappingIt is not defined. To put it simply, a piece of video memory after Mapping can be accessed by the CPU.After the Buffer of the three graphics API s (D3D12, Vulkan and Metal) is mapped, the CPU can access it. At this time, note that the GPU can still access this video memory. This will lead to a problem: IO conflict, whic ...

Added by kumschick on Sat, 12 Feb 2022 03:23:58 +0200

JavaScript WebGL framebuffer object

IntroductionWatching How I built a wind map with WebGL When I used the framebuffer, I checked the data and tried it alone.OriginMy GitHubFramebuffer objectWebGL has the ability to use the rendering results as textures, which is the framebuffer object.By default, the final drawing result of WebGL is stored in the color buffer, and the frame buff ...

Added by Graeme1972 on Wed, 02 Feb 2022 01:02:42 +0200

[the second youth training camp - front end of winter vacation] - Notes on "WebGL foundation"

I moved my notes on Nuggets: WebGL Basics,Personal blog Why WebGL / Why GPU? What is WebGL? GPU ≠ WebGL ≠ 3D Why is WebGL not as simple as other front-end technologies? Modern image system Raster: almost all modern graphics systems draw graphics based on raster. Raster refers to the pixel array constituting the image.Pixel: a pixel c ...

Added by Myrkul on Sat, 29 Jan 2022 13:55:00 +0200

Several best practices of WebGPU

Slides from 2022 webgl & webgpu meetup. There are materials at the end of the article. 1 use the label attribute where it can be used Every object in WebGPU has a label attribute, whether you pass the label attribute of descriptor when creating it, or directly access its label attribute after creation. This attribute is similar to an id, w ...

Added by yurko on Wed, 26 Jan 2022 06:35:00 +0200

JavaScript WebGL setting colors

IntroductionJavaScript WebGL draws a face Then I thought I could try something more complex. Unexpectedly, there was a problem when setting the color.OriginMy GitHubSet colorIn the previous examples, a single color was set, but each vertex can have its own color information.be based on Draw triangle There are mainly the following changes:dataVe ...

Added by brad_langdon on Tue, 04 Jan 2022 04:44:25 +0200

JavaScript WebGL draws a line

Introduction next WebGL basic concepts , do a simple example of drawing a straight line. Mainly refer to the following two articles: Draw a point Draw triangle Origin My GitHub Draw a line I won't explain each function in detail below. I prefer to have a sense of the overall logic first, and then check the data as needed during actual ...

Added by svan_rv on Wed, 08 Dec 2021 13:19:34 +0200