Computer Graphics & Visualization @ufrj.br
Canvas primerCanvas primer IISVG IntroMinimal WebGL ProgramWebGL primer with reglShadertoy style drawingTransformation demoModelview DemoModel, View and Projection DemoWebGL CubeCatmull Clark SubdivisionThree.js basicsPhong Illumination modelHalf-edge data structureIterated Function SystemsRaytracingTextured spherePhysical 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
Environment mapping
{
let h = 200;
let ctx = DOM.context2d(width, h*2,1);
images.forEach((img,i) => {
ctx.drawImage(img,h*~~(i/2),h*(i%2),h,h)
})
return ctx.canvas
}
function colorImage (color) {
let ctx = DOM.context2d(64,64,1);
ctx.fillStyle = color;
ctx.fillRect(0,0,64,64);
return ctx.canvas
}
images = (conf.tex == 'landscape' ?
[await FileAttachment("posx.jpg").image(),
await FileAttachment("negx.jpg").image(),
await FileAttachment("posy.jpg").image(),
await FileAttachment("negy.jpg").image(),
await FileAttachment("posz.jpg").image(),
await FileAttachment("negz.jpg").image()] :
[colorImage('red'),
colorImage('green'),
colorImage('blue'),
colorImage('yellow'),
colorImage('lightgray'),
colorImage('magenta')])
cube = {
return regl.cube(...images)
}
import {bunny,teapot} from "@esperanc/phong-illumination-model"
obj = {
if (conf.obj == 'teapot') return { vertices:teapot.pos, faces: teapot.faces, normals: teapot.normal};
if (conf.obj == 'bunny') return {vertices:bunny.pos, faces: bunny.faces, normals: bunny.normal} ;
return sphereMesh(1,20,40)
}
//
// Generates a draw program for drawing the faces of triangle mesh
//
drawProgram = {
return regl({
frag: `
precision mediump float;
uniform vec4 color;
varying vec3 vertex_normal;
varying vec3 vertex_texdir;
uniform vec3 light_dir;
uniform bool modulate;
uniform float blend_alpha;
uniform samplerCube cube;
void main () {
vec3 normal = normalize(vertex_normal);
vec3 normal_inv = normalize (vertex_texdir);
vec4 texColor = textureCube(cube,normal_inv);
vec4 lightColor = vec4(clamp(color.xyz*dot(normal,light_dir),0.0,1.0),1.0);
if (modulate) gl_FragColor = texColor*lightColor;
else gl_FragColor = texColor*blend_alpha+lightColor*(1.0-blend_alpha);
}`,
vert: `
attribute vec3 position;
attribute vec3 normal;
varying vec3 vertex_normal;
varying vec3 vertex_texdir;
uniform mat4 modelview;
uniform mat4 invmodelview;
uniform mat4 projection;
void main () {
vec4 worldpos = modelview*vec4(position, 1.0);
gl_Position = projection*worldpos;
${conf.envmap ? `
vec4 eye = invmodelview * vec4(0, 0, 0, 1);
vertex_texdir = reflect(normalize(position.xyz - eye.xyz/eye.w),normal);
` : `
vertex_texdir = normal;
`}
vertex_normal = (modelview*vec4(normal,0.0)).xyz;
}`,
// These are the vertex attributes that will be passed
// on to the vertex shader
attributes: {
position: obj.vertices,
normal: obj.normals
},
// These are the uniforms, i.e., global shader variables that are set
// from inside the host (CPU) program
uniforms: {
color: [1, 1, 1, 1],
light_dir : vec3.normalize([], vec3.set ([],1,1,2)),
modelview : regl.prop('modelview'),
invmodelview : regl.prop ('invmodelview'),
projection : regl.prop ('projection'),
cube : cube,
modulate : regl.prop('modulate'),
blend_alpha : regl.prop ('blend_alpha')
},
// The depth buffer
depth: {
enable: true,
func: '<',
mask: true,
},
// Number of triangles
elements: obj.faces
})
}
mutable view = mat4.lookAt([],[0,0,5],[0,0,0],[0,1,0])
projection = mat4.perspective ([], 40 * Math.PI/180, 16/9, 0.01, 100)
mutable model = mat4.identity([])
modelview = mat4.mul([],view,model)
invmodelview = mat4.invert([], modelview)
draw = {
regl.clear({
color: [0.8, 0.8, 1.0, 1],
depth: 1
})
let uniforms = {modelview,invmodelview,projection,
modulate: conf.texmode == 'modulate',
blend_alpha: conf.texmode == 'blend' ? conf.texblend : 1.0};
drawProgram(uniforms);
}
import {tabbed,paged,combo} from "@esperanc/aggregated-inputs"
import {select,radio, checkbox,button,number} from "@jashkenas/inputs"
createRegl = require('regl@1.4.2/dist/regl.js')
regl = createRegl(canvas)
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.
