{
let canvas = html`<canvas width="${width}" height="400"/>`
let projection = glm.mat4.create();
let model = glm.mat4.create();
let view = glm.mat4.create();
let ident = glm.mat4.create();
let sphere = null;
let a = 0;
async function setup(gl) {
gl.enable(gl.DEPTH_TEST);
gl.clearColor(0,0,0,1);
glm.mat4.perspective(projection,(45*Math.PI)/180,width/400,0.1,100);
// Sol
gl.activeTexture(gl.TEXTURE0);
await gl_utils.textures.load(gl,sol);
// Mercurio
gl.activeTexture(gl.TEXTURE1);
await gl_utils.textures.load(gl,mercurio);
// Venus
gl.activeTexture(gl.TEXTURE2);
await gl_utils.textures.load(gl,venus);
// Terra
gl.activeTexture(gl.TEXTURE3);
await gl_utils.textures.world(gl);
// Lua
gl.activeTexture(gl.TEXTURE4);
await gl_utils.textures.load(gl,lua);
// Marte
gl.activeTexture(gl.TEXTURE5);
await gl_utils.textures.load(gl,marte);
// Jupiter
gl.activeTexture(gl.TEXTURE6);
await gl_utils.textures.load(gl,jupiter);
// Saturno
gl.activeTexture(gl.TEXTURE7);
await gl_utils.textures.load(gl,saturno);
// Urano
gl.activeTexture(gl.TEXTURE8);
await gl_utils.textures.load(gl,urano);
// Netuno
gl.activeTexture(gl.TEXTURE9);
await gl_utils.textures.load(gl,netuno);
sphere = sphereGeometry(gl);
gl_utils.viewHandler(canvas,(x,y,z)=>{
glm.mat4.lookAt(view,[2*x,2*y,2*z],[0,0,0],[0,1,0]);
});
}
function draw(gl) {
// Sol
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
glm.mat4.rotate(model,ident,a,[0,1,0]);
sphere.draw({model, view, projection, textura: 0});
//Mercurio
glm.mat4.rotate(model,ident,-a * 5 ,[0,1,0]);
glm.mat4.translate(model,model,[-3,0,0]);
glm.mat4.scale(model,model,[0.2,0.2,0.2]);
sphere.draw({model, view, projection, textura: 1});
// Venus
glm.mat4.rotate(model,ident,-a * 4,[0,1,0]);
glm.mat4.translate(model,model,[-5,0,0]);
glm.mat4.scale(model,model,[0.2,0.2,0.2]);
sphere.draw({model, view, projection, textura: 2});
//Terra
glm.mat4.rotate(model,ident,-a * 2,[0,1,0]);
glm.mat4.translate(model,model,[-7,0,0]);
glm.mat4.scale(model,model,[0.2,0.2,0.2]);
sphere.draw({model, view, projection, textura: 3});
// Lua
glm.mat4.rotate(model,model,-a,[0,1,0]);
glm.mat4.translate(model,model,[-4,0,0]);
glm.mat4.scale(model,model,[0.2,0.2,0.2]);
sphere.draw({model, view, projection, textura: 4});
// Marte
glm.mat4.rotate(model,ident,-a * 1.8,[0,1,0]);
glm.mat4.translate(model,model,[-9,0,0]);
glm.mat4.scale(model,model,[0.2,0.2,0.2]);
sphere.draw({model, view, projection, textura: 5});
//Jupiter
glm.mat4.rotate(model,ident,-a * 1.4,[0,1,0]);
glm.mat4.translate(model,model,[-11,0,0]);
glm.mat4.scale(model,model,[0.4,0.4,0.4]);
sphere.draw({model, view, projection, textura: 6});
//Saturno
glm.mat4.rotate(model,ident,-a * 1.2,[0,1,0]);
glm.mat4.translate(model,model,[-13,0,0]);
glm.mat4.scale(model,model,[0.3,0.3,0.3]);
sphere.draw({model, view, projection, textura: 7});
//Urano
glm.mat4.rotate(model,ident,-a *1,[0,1,0]);
glm.mat4.translate(model,model,[-15,0,0]);
glm.mat4.scale(model,model,[0.3,0.3,0.3]);
sphere.draw({model, view, projection, textura: 8});
//Netuno
glm.mat4.rotate(model,ident,-a * 0.8,[0,1,0]);
glm.mat4.translate(model,model,[-17,0,0]);
glm.mat4.scale(model,model,[0.2,0.2,0.2]);
sphere.draw({model, view, projection, textura: 9});
a += 0.01;
}
return gl_utils.appLoop(canvas,{setup,draw});
}
function sphereGeometry(gl) {
let atribs = geraAtributos(50,50,esfera(2));
const prog = gl_utils.createProgram(gl, [
[ gl.VERTEX_SHADER, vertexShader ],
[ gl.FRAGMENT_SHADER, fragmentShader ]
]);
let a_position = gl.getAttribLocation(prog,"a_position");
let a_normal = gl.getAttribLocation(prog,"a_normal");
let a_texture = gl.getAttribLocation(prog,"a_texture");
let vao = gl.createVertexArray()
gl.bindVertexArray(vao)
gl.enableVertexAttribArray(a_position);
gl.enableVertexAttribArray(a_normal);
gl.enableVertexAttribArray(a_texture);
let position_vbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,position_vbo);
gl.bufferData(gl.ARRAY_BUFFER,atribs.posicoes,gl.STATIC_DRAW);
gl.vertexAttribPointer(a_position, 3, gl.FLOAT, false, 0, 0);
let normal_vbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,normal_vbo);
gl.bufferData(gl.ARRAY_BUFFER,atribs.normais,gl.STATIC_DRAW);
gl.vertexAttribPointer(a_normal, 3, gl.FLOAT, false, 0, 0);
let texture_vbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,texture_vbo);
gl.bufferData(gl.ARRAY_BUFFER,atribs.textura,gl.STATIC_DRAW);
gl.vertexAttribPointer(a_texture, 2, gl.FLOAT, false, 0, 0);
let index_vbo = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,index_vbo);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,atribs.indices,gl.STATIC_DRAW);
function draw(uniforms) {
gl.bindVertexArray(vao);
gl.useProgram(prog);
gl.uniformMatrix4fv(gl.getUniformLocation(prog,"model"),false,uniforms.model);
gl.uniformMatrix4fv(gl.getUniformLocation(prog,"view"),false,uniforms.view);
gl.uniformMatrix4fv(gl.getUniformLocation(prog,"projection"),false,uniforms.projection);
gl.uniform1i(gl.getUniformLocation(prog,"u_texture"), uniforms.textura);
gl.drawElements(gl.TRIANGLE_STRIP,atribs.indices.length,gl.UNSIGNED_SHORT,0);
}
return { draw };
}
lua = FileAttachment("lua.jpeg").image()
jupiter = FileAttachment("jupiter.jpg").image()
marte = FileAttachment("marte.jpg").image()
mercurio = FileAttachment("mercurio.png").image()
netuno = FileAttachment("netuno.jpg").image()
sol = FileAttachment("sol.png").image()
urano = FileAttachment("uranus.png").image()
venus = FileAttachment("venus.jpg").image()
saturno = FileAttachment("saturno.jpg").image()
function esfera(r) {
return (u,v) => {
let theta = u*Math.PI-Math.PI/2;
let phi = v*2*Math.PI;
return [
r * Math.cos(theta) * Math.cos(phi),
r * Math.sin(theta),
r * Math.cos(theta) * Math.sin(phi)
]
}
}
function thorus(r) {
return (u,v) => {
let theta = u*2*Math.PI;
let phi = v*2*Math.PI;
let d = 5;
return [
(r * Math.cos(theta) + d) * Math.cos(phi),
r * Math.sin(theta),
(r * Math.cos(theta) + d) * Math.sin(phi)
]
}
}
// * * * * * * * * * * │ * Vertice Comum V(i,j)
// │
// X * * * * * * * * * * X │ X Vertices Degenerados:
// │ N LINHAS(i)
// X * * * * * * * * * * X │ V(i,0)
// │ V(i+1,0)-1
// * * * * * * * * * * │
// V(i,j) = i*M+j
// ───────────────────
// M COLUNAS(j)
function geraIndices(M,N) {
let indices = new Uint16Array(M*(N-1)*2+(N-2)*2);
let k = 0;
for(let i=0; i<N-1; i++) {
if(i>0) {
// Triângulos degenerados no inicio / fim de uma linha
indices[k++] = (i+1)*(M)-1;
indices[k++] = i*(M);
}
for(let j=0; j<M; j++) {
indices[k++] = i*(M)+j;
indices[k++] = (i+1)*(M)+j;
}
}
return indices;
}
function geraPosicoes(M,N,f) {
let posicoes = new Float32Array(M*N*3);
let k = 0;
for(let i=0; i<M; i++) {
let u = i/(M-1);
for(let j=0; j<N; j++) {
let v = j/(N-1);
let [x,y,z] = f(u,v);
posicoes[k++] = x;
posicoes[k++] = y;
posicoes[k++] = z;
}
}
return posicoes;
}
function geraNormais(M,N,f) {
const epsilon = 0.001;
let normais = new Float32Array(M*N*3);
let k = 0;
for(let i=0; i<M; i++) {
let u = i/(M-1);
let du = u + epsilon;
for(let j=0; j<N; j++) {
let v = j/(N-1);
let dv = v + epsilon;
let [x,y,z] = f(u,v);
let [x1,y1,z1] = f(du,v);
let [x2,y2,z2] = f(u,dv);
let [v1x,v1y,v1z] = [x1-x, y1-y, z1-z];
let [v2x,v2y,v2z] = [x2-x, y2-y, z2-z];
let [vnx, vny, vnz] = [v1y*v2z-v1z*v2y, v1z*v2x-v1x*v2z, v1x*v2y-v1y*v2x];
let vlen = Math.sqrt(vnx*vnx+vny*vny+vnz*vnz);
normais[k++] = vnx/vlen;
normais[k++] = vny/vlen;
normais[k++] = vnz/vlen;
}
}
return normais;
}
function geraCoordenadasTextura(M,N) {
let coordenadasTextura = new Float32Array(M*N*2);
let k = 0;
for(let i=0; i<M; i++) {
let u = i/(M-1);
for(let j=0; j<N; j++) {
let v = j/(N-1);
coordenadasTextura[k++] = 1-v;
coordenadasTextura[k++] = 1-u;
}
}
return coordenadasTextura;
}
function geraAtributos(M,N,f) {
return {
indices: geraIndices(M,N),
posicoes: geraPosicoes(M,N,f),
normais: geraNormais(M,N,f),
textura: geraCoordenadasTextura(M,N)
}
}
glm = import("gl-matrix")
import {gl_utils} from "@rmauro/webgl-utils"
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.
