Computer Graphics & Visualization @ufrj.br
drawSphere = regl({
frag: `
precision mediump float;
uniform vec4 color;
varying vec3 vertex_normal;
uniform vec3 light_dir;
void main () {
gl_FragColor = vec4(clamp(color.xyz*dot(vertex_normal,light_dir),0.0,1.0),1.0);
}`,
vert: `
attribute vec3 position;
attribute vec3 normal;
varying vec3 vertex_normal;
uniform mat4 modelview;
void main () {
gl_Position = modelview*vec4(position, 1.0);
vertex_normal = normal; //(modelview*vec4(normal,1.0)).xyz;
}`,
// These are the vertex attributes that will be passed
// on to the vertex shader
attributes: {
position: sphere.pos,
normal: sphere.normal
// position: flatSphere.pos,
// normal: flatSphere.norm
},
// 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 : [0.7,0.7,0.7],
modelview : regl.prop('modelview')
},
// The depth buffer
depth: {
enable: true,
mask: true,
func: '>',
range: [0, 1]
},
// Indices of vertices to be fed into the pipeline
elements: sphere.faces
//count: flatSphere.pos.length
})
draw = {
// First clear the frame buffer
regl.clear({
color: [0.5, 0.5, 0.5, 1],
depth: 0
})
// And then draw the triangle
drawSphere({modelview:modelview})
}
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.
