Computer Graphics & Visualization @ufrj.br
Canvas primerCanvas primer IISVG IntroMinimal WebGL ProgramShadertoy style drawingTransformation demoModelview DemoModel, View and Projection DemoWebGL CubeCatmull Clark SubdivisionThree.js basicsPhong Illumination modelHalf-edge data structureIterated Function SystemsRaytracingTextured sphereEnvironment mappingPhysical animation with shape matchingShape matching2D GJK and EPA algorithmsOmohundro balltree construction algorithmsPlatonic Solids PlaygroundElliptic billiards 3-periodics in space-time3D LabyrinthBrush drawingBump mappingFractal TerrainModel viewerKeyframe animationTextured planeSimple Adaptive Mosaic EffectsWallpaper GroupsRay marchingVolume rendering with slice compositingDisplaying 3D RBFs with ray marchingFunções 2D úteisRandom space-filling curvesGPU-IO3D Apollonian Sphere PackingsCircle inversion fractalsApollonian gasket construction by inversionSmooth PolygonDocument image segmentationB-SplinesStencil bufferNoise LoopsSimplex noise exerciserDeformation with RBFsRandom shapes in a gridHobby curvesLane-Riesenfeld subdivision
WebGL primer with regl
createRegl = require("regl")
canvas = html`<canvas width=300 height=200>`
regl = createRegl(canvas)
drawTriangle = regl({
// In a draw call, we can pass the shaders source code to regl
frag: `
precision mediump float;
uniform vec4 color;
void main () {
gl_FragColor = color;
}`,
vert: `
attribute vec2 position;
void main () {
gl_Position = vec4(position, 0, 1);
}`,
// These are the vertex attributes that will be passed
// on to the vertex shader
attributes: {
position: [
[-1, 0],
[0, -1],
[1, 1]
]
},
// These are the uniforms, i.e., global shader variables that are set
// from inside the host (CPU) program
uniforms: {
color: [1, 0, 0, 1]
},
// Total number of vertices to be fed into the pipeline
count: 3
})
draw = {
// First clear the frame buffer
regl.clear({
color: [0, 0, 0, 1]
})
// And then draw the triangle
drawTriangle()
}
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.
