Points

View source! — View as standalone webpage

This example shows how to render points of various sizes using a quad and instancing.

You can read more details here.

import { mat4 } from 'wgpu-matrix';
import { GUI } from 'dat.gui';

import distanceSizedPointsVertWGSL from './distance-sized-points.vert.wgsl';
import fixedSizePointsVertWGSL from './fixed-size-points.vert.wgsl';
import orangeFragWGSL from './orange.frag.wgsl';
import texturedFragWGSL from './textured.frag.wgsl';
import { quitIfWebGPUNotAvailable } from '../util';

// See: https://www.google.com/search?q=fibonacci+sphere
function createFibonacciSphereVertices({
numSamples,
radius,
}: {
numSamples: number;
radius: number;
}) {
const vertices = [];
const increment = Math.PI * (3 - Math.sqrt(5));
for (let i = 0; i < numSamples; ++i) {
const offset = 2 / numSamples;
const y = i * offset - 1 + offset / 2;
struct Vertex {
@location(0) position: vec4f,
};

struct Uniforms {
matrix: mat4x4f,
resolution: vec2f,
size: f32,
};

struct VSOutput {
@builtin(position) position: vec4f,
@location(0) texcoord: vec2f,
};

@group(0) @binding(0) var<uniform> uni: Uniforms;

@vertex fn vs(
vert: Vertex,
@builtin(vertex_index) vNdx: u32,
) -> VSOutput {
let points = array(
vec2f(-1, -1),
vec2f( 1, -1),
vec2f(-1, 1),
vec2f(-1, 1),
vec2f( 1, -1),
vec2f( 1, 1),
);
var vsOut: VSOutput;
let pos = points[vNdx];
let clipPos = uni.matrix * vert.position;
let pointPos = vec4f(pos * uni.size / uni.resolution, 0, 0);
struct Vertex {
@location(0) position: vec4f,
};

struct Uniforms {
matrix: mat4x4f,
resolution: vec2f,
size: f32,
};

struct VSOutput {
@builtin(position) position: vec4f,
@location(0) texcoord: vec2f,
};

@group(0) @binding(0) var<uniform> uni: Uniforms;

@vertex fn vs(
vert: Vertex,
@builtin(vertex_index) vNdx: u32,
) -> VSOutput {
let points = array(
vec2f(-1, -1),
vec2f( 1, -1),
vec2f(-1, 1),
vec2f(-1, 1),
vec2f( 1, -1),
vec2f( 1, 1),
);
var vsOut: VSOutput;
let pos = points[vNdx];
let clipPos = uni.matrix * vert.position;
let pointPos = vec4f(pos * uni.size / uni.resolution * clipPos.w, 0, 0);

@fragment fn fs() -> @location(0) vec4f {
return vec4f(1, 0.5, 0.2, 1);
}

struct VSOutput {
@location(0) texcoord: vec2f,
};

@group(0) @binding(1) var s: sampler;
@group(0) @binding(2) var t: texture_2d<f32>;

@fragment fn fs(vsOut: VSOutput) -> @location(0) vec4f {
let color = textureSample(t, s, vsOut.texcoord);
if (color.a < 0.1) {
discard;
}
return color;
}