Computer Graphics & Visualization @ufrj.br
drawBox = 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);
//gl_FragColor = vec4(vec3(gl_FragCoord.z),1.0);
}`,
vert: `
attribute vec3 position;
attribute vec3 normal;
varying vec3 vertex_normal;
uniform mat4 modelview;
uniform mat4 projection;
void main () {
vec4 worldpos = modelview*vec4(position, 1.0);
gl_Position = projection*worldpos;
vertex_normal = (modelview*vec4(normal,0.0)).xyz;
}`,
// These are the vertex attributes that will be passed
// on to the vertex shader
attributes: {
position: box.positions,
normal: box.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,1)),
modelview : regl.prop('modelview'),
projection : regl.prop ('projection')
},
// The depth buffer
depth: {
enable: true,
func: '<',
mask: true,
},
// Number of triangles
count: box.positions.length/3
})
draw = {
// First clear the frame buffer
regl.clear({
color: [0.8, 0.8, 1.0, 1],
depth: 1
})
// And then draw the triangle
drawBox({modelview:mat4.mul([],matrices.view,matrices.model), projection:matrices.projection})
}
useNumberInput = true // Set to true to use number inputs rather than sliders
function RangeSlider (options) {
let {title="", labels=["min","max"], min=-2, max=2, step=0.1, value=[0,1], callback=()=>0 } = options;
let minSlider = Slider({title:labels[0], min:min, max:max, step:step, value:value[0],
callback : x=> {value[0] = +x; callback(value) }});
let maxSlider = Slider({title:labels[1], min:min, max:max, step:step, value:value[1],
callback : y=> {value[1] = +y; callback(value) }});
return html`${title}${minSlider} , ${maxSlider}`;
}
vec3 = glmatrix.vec3
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.
