regl = createRegl(canvas)
drawObj = regl({
frag: `
precision mediump float;
uniform vec4 color;
varying vec3 vtxNormal;
varying vec4 worldpos;
uniform vec3 lightDir;
uniform vec3 lightPos;
uniform vec3 lightColor;
uniform vec3 objColor;
uniform float ambient;
uniform float exponent;
uniform float emission;
uniform float diffuse;
uniform float specular;
uniform float shininess;
uniform float daf;
uniform float angle;
void main () {
vec3 lightPos = -1.0*lightPos;
float angle = cos(radians(angle));
vec3 t = worldpos.xyz;
vec3 k = normalize(t-lightPos);
vec3 lightDir = normalize(-1.0*lightDir);
vec3 normal = normalize(vtxNormal);
float daf = max(0.0,dot(lightDir,-1.0*k));
float diffuseComp = max(0.0,diffuse * dot(normal,lightDir));
vec3 ref = 2.0*dot(lightDir,normal)*normal - lightDir;
float specularComp = specular*pow(max(0.0,dot(ref,vec3(0.0,0.0,1.0))),shininess);
vec3 lightColor = lightColor*pow(daf,exponent);
vec4 u = vec4(emission*objColor +
(ambient+diffuseComp)*lightColor*objColor +
specularComp*lightColor, 1.0);
vec4 g = vec4(0.0,0.0,0.0,0.9);
if (daf >= angle) {
gl_FragColor = u;
}else{
gl_FragColor = g;
}
}`,
vert: `
attribute vec3 position;
attribute vec3 normal;
varying vec3 vtxNormal;
varying vec4 worldpos;
uniform mat4 modelview;
uniform mat4 projection;
void main () {
worldpos = modelview*vec4(position, 1.0);
gl_Position = projection*worldpos;
vtxNormal = (modelview*vec4(normal,0.0)).xyz;
}`,
// These are the vertex attributes that will be passed
// on to the vertex shader
attributes: {
position: obj.pos,
normal: obj.normal
},
// These are the uniforms, i.e., global shader variables that are set
// from inside the host (CPU) program
uniforms: {
objColor: regl.prop('objColor'),
angle: regl.prop('angle'),
lightColor: regl.prop('lightColor'),
lightPos : regl.prop('lightPos'),
lightDir: regl.prop('lightDir'),
ambient: regl.prop('ambient'),
exponent: regl.prop('exponent'),
emission: regl.prop('emission'),
diffuse: regl.prop('diffuse'),
specular: regl.prop('specular'),
shininess : regl.prop ('shininess'),
modelview : regl.prop('modelview'),
projection : regl.prop ('projection')
},
// The depth buffer
depth: {
enable: true,
func: '<',
mask: true,
},
// Number of triangles
elements: obj.faces
})
exponent = parameters.light.exponent;
angle = parameters.light.cutoff;
lightPos = vec3.transformMat3([], xyzToVec3(parameters.light.position),mat3.fromMat4([],view))
lightDir = vec3.normalize([],
vec3.transformMat3([], xyzToVec3(parameters.light.direction),mat3.fromMat4([],view)))
lightDir
//
// Little utility to add a title to the left of an input, rather than to the top as in the elements
// produced by the Input bazzar.
//
addTitle = function (title,input) {
input.childNodes[0].style.display="inline-block";
input.prepend(html`<span style="font: 700 0.9rem sans-serif;display:inline-block;padding-right:1em;">${title}</span>`);
return input;
}
bunny = {
let obj = parseObj (await FileAttachment("bunny.obj").text());
obj.pos = obj.pos.map (([x,y,z])=>[x+0.4,y-1,z])
return obj
}
teapot = {
let obj = parseObj (await FileAttachment("teapot@1.obj").text());
obj.pos = obj.pos.map(([x,y,z])=>[x/10,y/10,z/10])
return obj
}
obj = parameters.obj.type == "bunny" ? bunny : (parameters.obj.type == "teapot" ? teapot : sphere)
createRegl = require('regl@1.4.2/dist/regl.js')
import {tabbed,paged,combo} from "@esperanc/aggregated-inputs"
import {number,slider,select,color} from "@jashkenas/inputs"
glmatrix = await require('https://bundle.run/gl-matrix@3.3.0')
import {sphere} from "@esperanc/modelview-demo"
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.
