Public
Edited
Apr 17
2 stars
rtsShader = createShaderModule(
device,
`
struct Uniforms {
contrast: f32,
brightness: f32
}
@group(0) @binding(0) var<storage, read> values: array<f32>;
@group(0) @binding(1) var<uniform> uniforms: Uniforms;
const PI = ${Math.PI};
fn getIndex(coord: vec2<u32>) -> u32 {
return coord.y * 512u + coord.x;
}
@vertex
fn vs_main(@builtin(vertex_index) idx: u32) -> @builtin(position) vec4<f32> {
var pos = array<vec2<f32>, 3>(
vec2(-4.0, -4.0),
vec2(4.0, -4.0),
vec2(0.0, 4.0)
);
return vec4<f32>(pos[idx], 0.0, 1.0);
}
@fragment
fn fs_main(@builtin(position) pos: vec4<f32>) -> @location(0) vec4<f32> {
let coord = vec2<u32>(pos.xy);
var value = values[getIndex(coord)];
value = 0.5 + 0.5 * tanh((value - 1.0) * uniforms.contrast + uniforms.brightness);
value = pow(value, 0.454);
return vec4<f32>(value, value, value, 1.0);
}
`
)
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
