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')
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.
