Public
Edited
Feb 25, 2022
1 fork
1 star
gl4.canvas;
setupScene = gl4.regl({
uniforms: {
aspect: ctx => [ctx.viewportWidth / ctx.viewportHeight, 1],
//eye:[0,0,0.3], // Vantage point, i.e. the eye position expressed in world coordinates.
// Note that eye is the origin of the Camera coordinte system.
eye: gl3.regl.prop('eye'),
at: [0,0,0], // Focus point, i.e. the look-at position expressed in world coordinates
/*
Up direction. We need a vector to use it in a cross product.
Up cannot be proportional to eye.
*/
up: [0,1,0],
// I suppose regl uses column-major notation for matrices, because the OpenGL Specification
// and the OpenGL Reference Manual both use column-major notation (see matrix "translate" below).
// https://www.khronos.org/opengl/wiki/General_OpenGL:_Transformations
/*
Array "rotateX" describes matrix
[
1, 0, 0, 0,
0, Math.cos(ax), -Math.sin(ax), 0,
0, Math.sin(ax), Math.cos(ax), 0,
0, 0, 0, 1,
],
which with the right-multiplication (M*v) describes a counterclockwise rotation
in a right-handed coordinate system, or a clockwise rotation in a left-handed system.
*/
rotateX: [
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1,
],
/*
Array "rotateY" describes matrix
[
Math.cos(ay), 0, Math.sin(ay), 0,
0, 1, 0, 0,
-Math.sin(ay), 0, Math.cos(ay), 0,
0, 0, 0, 1,
],
which with the right-multiplication (M*v) describes a counterclockwise rotation
in a right-handed coordinate system, or a clockwise rotation in a left-handed system.
*/
rotateY: [
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1,
],
/*
Array "rotateZ" describes matrix
[
Math.cos(az), -Math.sin(az), 0, 0,
Math.sin(az), Math.cos(az), 0, 0,
0, 0, 1, 0,
0, 0, 0, 1,
],
which with the right-multiplication (M*v) describes a counterclockwise rotation
in a right-handed coordinate system, or a clockwise rotation in a left-handed system.
*/
rotateZ: [
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1,
],
// This matrix is compatible with the column-major notation and
// the right-multiplication M*v used in the vertex shader.
translate: [
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1,
],
// Orthographic projection (column major order)
// Note that there is symmetry between x, y and the z direction. Setting entry [2,2] to -2/(far-near),
// as suggested in the wikipedia, has the effect to flip the system handedness, but the camera eye
// position seems not consistent anymore (probably the camere basis has to change as well).
projection: [
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 0.1, 0,
0, 0, 0, 1,
],
},
})
function draw4 (t) {
gl4.regl.clear({color: [0.9, 0.9, 0.9, 1]})
const eye = [Math.cos(t), 0.5, Math.sin(t)]
setupScene({eye}, cmd4);
setupScene({eye}, drawAxis)
}
draw4(now / 1000);
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.
