data journalist, gardener, engineer
Regl learning
Rotate and interact regl camera
{
const draw = regl({
vert: `
precision mediump float;
attribute vec3 position, normal;
attribute vec4 axisAngle;
attribute vec2 uv;
attribute vec3 displacement; // Add displacement vector to position before applying projection and view
uniform mat4 projection, view;
uniform float scaling;
uniform float tick;
uniform vec3 axis;
varying vec2 fragUV;
varying vec3 fragColor;
const float PI = 3.14159;
vec3 quatRotate(vec3 v){
//float angle = tick;
//if (angle > 360.) angle -= 360.;
float turn = 0.25*tick*PI/180.;
//vec3 axis = vec3(0, 1, 0);
vec4 q = vec4(axis*sin(turn), cos(turn));
return v + 2.0 * cross(q.xyz, cross(q.xyz, v) + q.w * v); // An optimized rotation using quaternion. Faster than q*v*conj(q)
}
void main() {
fragUV = uv;
fragColor = abs(normalize(quatRotate(normal)));
gl_Position = projection * view * vec4(quatRotate(scaling * position), 1);
}`,
frag: `
precision mediump float;
uniform sampler2D texture;
varying vec2 fragUV;
varying vec3 fragColor;
void main () {
gl_FragColor = vec4(texture2D(texture,fragUV).rgb*fragColor, 1.);
}
`,
attributes: {
position: sphere.positions,
uv: sphere.uvs,
normal: sphere.normals,
displacement: {
buffer: regl.buffer(displacementArray),
divisor: 1,
},
axisAngle: {
buffer: regl.buffer(axisAngleArray),
divisor: 1,
}
},
elements: sphere.cells,
uniforms: {
texture: checkerTexture,
scaling: 1.0,
tick: regl.prop("tick"),
axis: [0.0, 1.0, 0.0]
},
instances: 1.0
});
let tick = 0
while(true){
camera(() => {
regl.clear({color: [0.5, 0.5, 0.6, 1]});
draw({tick: tick});
tick++;
})
yield;
}
}
sphere
displacementArray={
const array = [];
Array(N).fill(0).forEach(
(d,z)=>Array(N).fill(0).forEach(
(d,y)=>Array(N).fill(0).forEach(
(d,x)=>array.push([2*(x+0.5)/N-1, 2*(y+0.5)/N-1, 2*(z+0.5)/N-1,]))));
return array;
}
axisAngleArray = {
const array = [];
Array(N*N*N).fill(0).forEach(()=>{
const theta = toRadian(rand()*180);
const phi = toRadian(rand()*360);
const angle = rand()*180;
//array.push([sin(theta)*cos(phi), sin(theta)*cos(phi), cos(theta), angle]);
array.push([0, 1, 0, 0])
});
return array;
}
camera = createCamera(regl, {
center: [0,0,0],
distance: 3.5,
noScroll: true,
near: 1,
far: 7,
damping: 0,
})
createCamera = require('https://bundle.run/regl-camera@2.1.1')
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.
