Computer Graphics & Visualization @ufrj.br
textures = {
return {
grid: await FileAttachment("uv_grid_opengl.jpg").image(),
earth : await FileAttachment("EarthMap.jpg").image(),
chessboard : await FileAttachment("checkerboard.png").image(),
crate : await FileAttachment("crate.gif").image()
}
}
sphereMesh = function (radius, nphi, ntheta) {
let vertices = [];
let faces = [];
let uvs = [];
let normals = [];
for (let i = 0; i <= nphi; i++) {
let phi = Math.PI/nphi*i;
for (let j = 0; j <= ntheta; j++) {
let theta = Math.PI*2/ntheta*j;
let normal = [Math.sin(phi)*Math.cos(theta),
Math.sin(phi)*Math.sin(theta),
Math.cos(phi)]
normals.push (normal)
vertices.push (normal.map(x => x*radius));
uvs.push([j/ntheta,1-i/nphi]);
if (i < nphi && j < ntheta) {
faces.push([i*(ntheta+1)+j,
(i+1)*(ntheta+1)+j,
(i+1)*(ntheta+1)+j+1],
[i*(ntheta+1)+j,
(i+1)*(ntheta+1)+j+1,
i*(ntheta+1)+j+1])
}
}
}
return {vertices,faces,uvs,normals}
}
obj = 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 vec2 vertex_uv;
uniform vec3 light_dir;
uniform sampler2D tex;
uniform bool modulate;
uniform float blend_alpha;
void main () {
vec4 texColor = texture2D(tex,vertex_uv);
vec4 lightColor = vec4(clamp(color.xyz*dot(vertex_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;
attribute vec2 uv;
varying vec3 vertex_normal;
varying vec2 vertex_uv;
uniform mat4 modelview;
uniform mat4 projection;
uniform mat3 uvtransform;
void main () {
vec4 worldpos = modelview*vec4(position, 1.0);
vertex_uv = (uvtransform*vec3(uv.xy,1.0)).xy;
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: obj.vertices,
normal: obj.normals,
uv: obj.uvs
},
// 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'),
projection : regl.prop ('projection'),
uvtransform: regl.prop('uvtransform'),
tex : regl.texture({data : textures[conf.parameters.tex],
wrapS : conf.parameters.wrapS,
wrapT : conf.parameters.wrapT,
min: conf.parameters.min,
max: conf.parameters.max,
mipmap: 'nice',
flipY: true
}),
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,4],[0,0,0],[0,1,0])
projection = mat4.perspective ([], 40 * Math.PI/180, 1, 0.01, 100)
mutable model = mat4.identity([])
draw = {
regl.clear({
color: [0.8, 0.8, 1.0, 1],
depth: 1
})
let [smin,smax,tmin,tmax] = [conf.ranges.smin,conf.ranges.smax,conf.ranges.tmin,conf.ranges.tmax];
let uvtransform = mat3.mul([], mat3.fromTranslation([], [smin,tmin]),
mat3.fromScaling([],[smax-smin,tmax-tmin]));
let uniforms = {modelview:mat4.mul([],view,model),
projection:projection,
uvtransform,
modulate: conf.parameters.texmode == 'modulate',
blend_alpha: conf.parameters.texmode == 'blend' ? conf.parameters.texblend : 1.0};
drawProgram(uniforms);
}
import {tabbed,paged,combo} from "@esperanc/aggregated-inputs"
import {select,checkbox,button,number} from "@jashkenas/inputs"
import {rangeSlider} from "@mootari/range-slider"
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.
