Data Visualization Specialist | Previously
@WashingtonPost @WallStreetJournal @MITSenseableCity
canvas = DOM.canvas(width, 460)
regl.frame(() => {
regl.clear({
depth: 1,
color: [0, 0, 0, 1]
});
drawBunny();
})
drawBunny = regl({
vert: `
precision mediump float;
attribute vec3 position;
uniform mat4 model, view, projection;
void main() {
gl_Position = projection * view * model * vec4(position, 1);
}`,
frag: `
precision mediump float;
void main() {
gl_FragColor = vec4(1, 1, 1, 1);
}`,
// converts the vertices of the mesh into the position attributes
attributes: {
position: bunny.positions
},
// converts the the faces of the mesh into elements (각 면)
// elements: 정점의 인덱스를 지정하여 복잡한 도형이나 정점을 공유하는 여러 도형을 그릴 때 사용 (count 대신)
elements: bunny.cells,
uniforms: {
model: mat4.identity([]), // 단위행렬 생성 (모델의 위치를 변경하지 않음)
// view 변환 행렬. 카메라가 토끼 모델 주위를 회전하도록 설정
view: ({ tick }) => {
const t = 0.01 * tick;
// mat4.lookAt([], eye, center, up)
return mat4.lookAt(
[],
[30 * Math.cos(t), 2.5, 30 * Math.sin(t)], // 카메라위치 (회전)
[0, 2.5, 0], // 카메라가 바라보는 대상의위치
[0, 1, 0] // 카메라의 위쪽 방향
);
},
// projection 변환 행렬. 원근 투영을 설정하여 3D 효과를 만듭니다.
projection: ({ viewportWidth, viewportHeight }) =>
// mat4.perspective([], fovy, aspect, near, far)
mat4.perspective(
[],
Math.PI / 4, // 시야각
viewportWidth / viewportHeight, // 화면의 가로세로 비율
0.01, // 카메라에서 가까운 클리핑 평면의 거리
1000 // 카메라에서 먼 클리핑 평면의 거리
)
}
})
bunny
// 4x4 행렬을 처리하기 위한 수학 라이브러리 또는 모듈
// mat4 객체는 4x4 행렬을 생성하고, 변환하며, 다양한 연산을 수행할 수 있는 기능을 제공
// 카메라 변환에 필요한 행렬을 쉽게 생성하고 관리할 수 있음
mat4 = require("https://bundle.run/gl-mat4@1.2.0")
bunny = (await import("https://cdn.skypack.dev/bunny@1.0.1")).default
regl = (await import("https://cdn.skypack.dev/regl@2")).default({ canvas })
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.
