draw()
xzPosition = {
let xzPosition = []
var row
var col
for (row = 0; row <= N; ++row) {
var z = (row / N) * (ymax - ymin) + ymin
for (col = 0; col <= N; ++col) {
var x = (col / N) * (xmax - xmin) + xmin
xzPosition.push([x, z])
}
}
return xzPosition
}
elements = {
let elements = []
var row
var col
// create plane faces.
for (row = 0; row <= (N - 1); ++row) {
for (col = 0; col <= (N - 1); ++col) {
var i = row * (N + 1) + col
var i0 = i + 0
var i1 = i + 1
var i2 = i + (N + 1) + 0
var i3 = i + (N + 1) + 1
elements.push([i3, i1, i0])
elements.push([i0, i2, i3])
}
}
return elements
}
function makeFrameBuffer() {
let fbo_texture = regl.texture({
shape: [N * 4, N * 4, 4],
type: 'float' // because it will be storing color floats
})
return regl.framebuffer({
color: fbo_texture,
depth: false,
stencil: false
});
}
fbo = makeFrameBuffer()
makeNoise = regl({
uniforms: {
u_resolution: ctx => [ctx.framebufferWidth,ctx.framebufferHeight],
},
vert: `
precision mediump float;
attribute vec2 position;
void main () {
gl_Position = vec4(position, 0, 1);
}`,
frag: `
precision mediump float;
uniform sampler2D k_combined_texture;
uniform vec2 u_resolution;
${snoise}
void main () {
// normalize the coordinates to the resolution of the canvas
vec2 st = gl_FragCoord.xy / u_resolution;
gl_FragColor = vec4(vec3(snoise(st)), 1.0);
}`,
attributes: {
position: [
-4, 0,
4, 4,
4, -4
]
},
count: 3,
framebuffer: fbo,
});
drawHeightMap = regl({
uniforms: {
texture: fbo,
},
frag: `
precision mediump float;
varying vec2 vUv;
varying vec3 vNormal;
uniform sampler2D texture;
void main () {
vec3 tex = texture2D(texture, vUv).rgb;
gl_FragColor = vec4(tex, 1.0);
}`,
vert: `
// the size of the world on the x and z-axes.
#define WORLD_SIZE 10.0
// the height of the world.
#define WORLD_HEIGHT 1.0
uniform sampler2D texture;
float getHeight(vec2 xz) {
vec2 uv = vec2(0.5, 0.5) + xz.xy;
return WORLD_HEIGHT*(-1.0 + 2.0 * texture2D(texture, uv).r);
}
vec3 getPosition(vec2 xz) {
return vec3(WORLD_SIZE*xz.x, getHeight(xz), WORLD_SIZE*xz.y);
}
precision mediump float;
attribute vec2 xzPosition;
varying vec3 vPosition;
varying vec2 vUv;
varying vec3 vNormal;
uniform mat4 projection, view;
void main() {
vec3 xyzPosition = getPosition(xzPosition);
vec2 uv = vec2(0.5, 0.5) + xzPosition.xy;
vUv = uv;
float eps = 1.0/16.0;
// approximate the normal with central differences.
vec3 va = vec3(2.0*eps,
getHeight(xzPosition + vec2(eps,0.0)) - getHeight(xzPosition - vec2(eps,0.0)) , 0.0 );
vec3 vb = vec3(0.0,
getHeight(xzPosition + vec2(0.0, eps)) - getHeight(xzPosition - vec2(0.0, eps)), 2.0*eps );
vNormal = normalize(cross(normalize(vb), normalize(va) ));
vPosition = xyzPosition;
gl_Position = projection * view * vec4(xyzPosition, 1);
}`,
attributes: {
xzPosition: xzPosition
},
elements: elements
})
camera = createCamera(regl, {
center: [0, -1.0, 0],
theta: 3.0 * Math.PI/4.0,
phi: Math.PI/6.0,
distance: 15.0,
damping: 0,
noScroll: true,
renderOnDirty: true
})
createCamera = require('https://bundle.run/regl-camera@2.1.1')
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.