Data Visualization Specialist | Previously
@WashingtonPost @WallStreetJournal @MITSenseableCity
canvas = DOM.canvas(width, 500)
// Continuously updates
regl.frame(() => {
camera(function () {
regl.clear({ color: [0, 0.1, 0.26, 1] });
drawBunny();
});
})
drawBunny = regl({
vert: `
precision mediump float;
uniform mat4 projection, view; // camera 함수가 view와 projection 행렬을 자동으로 생성
attribute vec3 position, normal;
varying vec3 vnormal;
void main () {
vnormal = normal;
// 3D to 2D position
gl_Position = projection * view * vec4(position, 1.0);
}`,
frag: `
precision mediump float;
varying vec3 vnormal;
void main () {
gl_FragColor = vec4(vnormal * 0.75 + 0.25, 1.0);
}`,
attributes: {
position: bunny.positions,
normal: normals(bunny.cells, bunny.positions)
},
// 모델의 면 정의
elements: bunny.cells
})
camera = reglCamera(regl, {
element: regl._gl.canvas, // regl의 WebGL 캔버스 요소를 사용
center: [0, 3.5, 0], // 카메라 중심위치
theta: (3.0 * Math.PI) / 4.0, // 카메라의 수평 회전각도
phi: Math.PI / 6.0, // 카메라의 수직 회전각도
distance: 20.0, // 카메라와 모델 사이의 거리
damping: 0, // 카메라 이동이 즉각적으로 반영됨
noScroll: true, // 스크롤로 인해 카메라가 이동하지 않도록
renderOnDirty: true // 카메라가 변경될 때만 렌더링 수행하도록 설정하여 성능 최적화
})
bunny = (await import("https://cdn.skypack.dev/bunny@1.0.1")).default
// 모델의 각 면에 대한 normal vector 계산
normals = (await import("https://cdn.skypack.dev/angle-normals@1.0.0")).default
reglCamera = (await import("https://cdn.skypack.dev/regl-camera@2.1.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.
