regl = createRegl(canvas)
drawObj = regl({
frag: `
precision mediump float;
uniform vec4 color;
varying vec3 vtxNormal;
uniform vec3 lightColor;
uniform vec3 lightPos;
uniform vec3 lightDir;
uniform float cutoffAngle;
uniform float exponent;
uniform vec3 objColor;
varying vec3 worldPos;
uniform float ambient;
uniform float emission;
uniform float diffuse;
uniform float specular;
uniform float shininess;
void main () {
vec3 lightDir = -lightDir;
vec3 lightToObject = normalize(-worldPos + lightPos);
float direction = max(dot(lightDir, lightToObject), 0.);
if (direction < cos(radians(cutoffAngle))) {
gl_FragColor = vec4(0, 0, 0, 0.9);
return;
}
vec3 lightColor = lightColor * pow(direction, exponent);
vec3 normal = normalize(vtxNormal);
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);
gl_FragColor = vec4(emission * objColor + (ambient + diffuseComp) * lightColor * objColor + specularComp * lightColor, 1.0);
}`,
vert: `
attribute vec3 position;
attribute vec3 normal;
varying vec3 vtxNormal;
varying vec3 worldPos;
uniform mat4 modelview;
uniform mat4 projection;
void main () {
vec4 worldpos = modelview * vec4(position, 1.0);
gl_Position = projection * worldpos;
worldPos = worldpos.xyz;
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'),
lightColor: regl.prop('lightColor'),
lightDir: regl.prop('lightDir'),
lightPos: regl.prop('lightPos'),
cutoffAngle: regl.prop('cutoffAngle'),
exponent: regl.prop('exponent'),
ambient: regl.prop('ambient'),
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
})
lightDir = vec3.normalize([],
vec3.transformMat3([], xyzToVec3(parameters.light.direction),mat3.fromMat4([],view)))
//
// 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.
