logo

G

  • Tutorials
  • API
  • Examples
  • Plugins
  • Productsantv logo arrow
  • 6.1.26
  • Canvas
    • Introduction
    • Options
    • Built-in objects
    • Coordinate system
    • Scenegraph & Lifecycle
    • Event
    • OffscreenCanvas & Server-side Rendering
    • CustomElementRegistry
    • Frequently Asked Questions
  • Renderer
    • Introduction
    • Canvas Renderer
    • Canvaskit Renderer
    • SVG Renderer
    • WebGL Renderer
    • WebGPU Renderer
    • Custom Renderer
  • Camera
    • Introduction
    • Camera Parameters
    • Camera action
    • Camera animation
  • Event
    • Introduction
    • Event Object
    • Gesture & Drag'n'Drop
    • Frequently Asked Questions
  • Animation
    • Web Animations API
    • Lottie
  • Basic Shapes
    • Basic Concepts
    • DisplayObject
    • Group
    • Text
    • Circle
    • Ellipse
    • Rect
    • Image
    • Line
    • Polygon
    • Polyline
    • Path
    • HTML
  • Style System
    • Introduction
    • CSS Typed OM
    • Inheritance
    • CSS Properties & Values API
    • CSS Layout API
    • Pattern
    • Gradient
  • 3D
    • 材质
    • 几何
    • Mesh
    • 光源
    • 雾
    • 交互
  • Built-in Objects
    • EventTarget
    • Node
    • Element
    • Document
    • MutationObserver
    • Utils
  • GPGPU
    • Introduction
    • Programming Model
    • Kernel API
    • Principles of classical GPGPU implementation
    • webgpu-graph
  • Declarative programming
    • 使用 Web Components
  • Devtools
    • G 开发者工具
    • 内置的渲染统计信息
    • 第三方开发调试工具

Principles of classical GPGPU implementation

Previous
Kernel API
Next
webgpu-graph

Resource

Ant Design
Galacea Effects
Umi-React Application Framework
Dumi-Component doc generator
ahooks-React Hooks Library

Community

Ant Financial Experience Tech
seeconfSEE Conf-Experience Tech Conference

Help

GitHub
StackOverflow

more productsMore Productions

Ant DesignAnt Design-Enterprise UI design language
yuqueYuque-Knowledge creation and Sharing tool
EggEgg-Enterprise-class Node development framework
kitchenKitchen-Sketch Tool set
GalaceanGalacean-Interactive solution
xtechLiven Experience technology
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

The principle of the classic GPGPU implementation using the Graphics Rendering API can be simply summarized as: scientific computation by texturing. For compatibility reasons, we also use this approach in WebGL.

「GPGPU 编程技术 - 从 GLSL、CUDA 到 OpenCL」

image

Render to Texture

Normally the final output target of the graphics rendering API is the screen, which displays the rendered result. But in a GPGPU scenario we just want to read the final computation on the CPU side. Therefore the off-screen rendering feature provided by the rendering API is used - rendering to a texture, where the key technique is to use a Framebuffer Object (FBO) as the rendering object.

However, this approach has the obvious limitation that the texture cache is either read-only or write-only for all threads, making it impossible for one thread to read a texture and another to write it. This is essentially due to the hardware design of the GPU. If you want to implement multiple threads reading/writing the same texture at the same time, you need to design complex synchronization mechanisms to avoid read/write conflicts, which inevitably affects the efficiency of parallel thread execution.

Therefore, in a classical GPGPU implementation, we usually prepare two textures, one to hold the input data and one to hold the output data. This is why we are allowed to use only one @out declaration for output variables.

Our data is stored in video memory, using the RGBA texture format, which contains 4 channels per pixel, so using vec4[] in GWebGPU is the most memory-efficient data format. If float[] is used, the three channels of GBA in each pixel are wasted. Of course the decision of the data type is up to the developer and can be decided based on the ease of access in the actual program.

Calling the draw command

Our computational logic is written in the Fragment Shader, where each pixel is assigned to a thread for shading during the rasterization phase of the rendering pipeline, achieving a parallel effect.

When mapped to the concept of computation in the CPU, textures can be considered as arrays, and the programs executed by the fragment shader are looping statements.

What is texture mapping

A 3D model consists of many triangular surfaces, each of which can theoretically continue to be subdivided infinitely, but coloring each triangular surface is very performance intensive. A faster approach is mapping, where a 2D bitmap (texture) is applied to the surface of the model, a process known as texture mapping. Instead of defining texture coordinates for each vertex of the model, we only need to define the coordinates of the four corners and leave the rest to the rendering pipeline for interpolation.

Ping-pong

Many algorithms need to be run several times in succession, for example, the layout algorithm used in G6 needs to be iterated several times to reach a steady state. The computation result output in the previous iteration needs to be used as input for the next iteration. In practice, we allocate two texture caches and swap the input and output textures after each iteration.

References

  • 「GPGPU 编程技术 - 从 GLSL、CUDA 到 OpenCL」🔗
  • http://www.vizitsolutions.com/portfolio/webgl/gpgpu/