Notebooks 2.0 is here.
Read the preview announcement
Platform
Resources
Pricing
Sign in
Get started
Brianna Wilson
data journalist, gardener, engineer
Workspace
Fork
Public
WebGL snippets
By
Brianna Wilson
Edited
Jan 18, 2022
ISC
Fork of
Instancing in Regl
1 star
WebGL snippets
Regl learning
Rotate and interact regl camera
Insert cell
Insert cell
Insert cell
{
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
;
}
}
Insert cell
sphere
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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
;
}
Insert cell
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
;
}
Insert cell
Insert cell
camera
=
createCamera
(
regl
,
{
center
:
[
0
,
0
,
0
]
,
distance
:
3.5
,
noScroll
:
true
,
near
:
1
,
far
:
7
,
damping
:
0
,
}
)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
createCamera
=
require
(
'https://bundle.run/regl-camera@2.1.1'
)
Insert cell
Insert cell
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.
Try it for free
Learn more
Compare fork
Fork
View
Export
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
myCanvas
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
regl
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
checkerTexture
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
checkerTextureData
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
displacementArray
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
axisAngleArray
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
N
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
camera
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
toRadian
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
vec3
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
mat4
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
cos
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
sin
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
rand
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
pi
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
glMatrix
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
createCamera
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
createRegl
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML