Published
Edited
Oct 5, 2018
5 stars
stdlib = require( "https://unpkg.com/@stdlib/stdlib@0.0.43/dist/stdlib-flat.min.js" )
function depthToClipSpaceZ (depth) {
// We consider depth to increase along the z-axis so that our three
// dimensional coordinates obey the right-hand rule.
var z = -depth;
// Compute the three entries of the perspective matrix that enter into
// this computation
var P_33 = -(far + near) / (far - near);
var P_34 = -2 * far * near / (far - near);
var P_43 = -1;
// Compute the z and w components of the depth in clip coordinates
var clipZ = P_33 * z + P_34;
var clipW = P_43 * z;
// To get the z value in clip coordinates, we perform perspective
// division and divide by w. This is the step which adds the nonlinearity.
var result = clipZ / clipW;
// Return the result, clamped to a reasonable range
return Math.min(100, Math.max(-100, result));
}
html`${stdlib.plot({
x: [
nearDepths,
depths,
farDepths,
[near, near], [far, far], [0, 10], [0, 10]
],
y: [
nearDepths.map(depthToClipSpaceZ),
depths.map(depthToClipSpaceZ),
farDepths.map(depthToClipSpaceZ),
[-2, 2], [-2, 2], [-1, -1], [1, 1]
],
colors: ['red', 'blue', 'red', 'gray', 'gray', 'gray', 'gray'],
lineStyle: ['-', '-', '-', '--', '--', '--', '--'],
lineWidth: [1, 2, 1, 1, 1, 1, 1],
yMin: -1.5,
yMax: 1.5,
xMin: 0,
xMax: 10,
xLabel: 'world-space depth',
yLabel: 'clip-space depth',
width: 700,
height: 500,
title: 'World-space depth vs. clip-space depth',
autoRender: false,
}).render('html')}
<style>
.canvas .label,
.canvas .tick text {
font-size: 15px;
font-family: var(--serif);
}
</style>`
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.
