"Learn WebGPU just for fun"

WebGPU : calculate the sum of the array in compute shader.

Screen space ambient occlusion.

Deferred Rendering.
Basic implementation of deferred rendering on WebGPU.

Physically based rendering.

The example shows the use of the inverse z method to better exploit the precision of the depth buffer.

Example of a basic GLTF load

Loading only one mesh without animations and other scene elements

Bloom на WebGPU

ubeMap on WebGPU and WebGL

Matcap implementation on WebGPU. Also uses MSAA.

Implementation of Shadow map on WebGPU

Implementation of Normal map on WebGPU

Implementation of Instance on WebGPU

Point light Phone implementation

Loading a mesh from an external file

1.OBJ format.
2.JSON format.

Post Effect on WebGPU.

1.Loading an array of data into a texture.
2.Loading a fragment of a dynamic scene into another texture.
3.Change the color of the pixels of the current main texture.

Simple post effect with 2D image.

We draw a texture on the plane and the image is pixelated

Using 2D_Canvas as a texture.

Draw on 2D_Canvas, and place the result into a WebGPU texture

Example of loading mipmap and generating mipmap on the GPU side.

Mipmap is generated by a separate shader and is loaded into the main texture for each mipmap level.

Example of loading mipmap.

Mipmaps loaded as separate textures for each mipmap level

Example Loading texture data from an array.

In this example, we create a texture using data from a Uint8Array. We use WebGPU to create the texture and display it on the screen.

Example of using texture. Consideration of what is sampler, texture_2d, vUV.

Getting color from a texture using the texture Sample function.

An example of the application of geometry transformation matrices. Perspective, view and model matrices.

Rendering geometry using a vertex buffer and an index buffer.

Initializing WebGPU and rendering the first triangle.