31:T458,worldTransformsGivenParams = ({ rX, rY, rZ, mx, my, mz, cx = 0, cy = 0, cz = 0 }) => { const rotationX = [ [ 1, 0, 0, 0], [ 0, Math.cos(rX), -Math.sin(rX), 0], [ 0, Math.sin(rX), Math.cos(rX), 0], [ 0, 0, 0, 1] ] const rotationY = [ [ Math.cos(rY), 0, Math.sin(rY), 0 ], [ 0, 1, 0, 0 ], [ -Math.sin(rY), 0, Math.cos(rY), 0 ], [ 0, 0, 0, 1 ] ] const rotationZ = [ [ Math.cos(rZ), -Math.sin(rZ), 0, 0 ], [ Math.sin(rZ), Math.cos(rZ), 0, 0 ], [ 0, 0, 1, 0 ], [ 0, 0, 0, 1 ] ] const cameraTransform = [ [ 1, 0, 0, 0 ], [ 0, 1, 0, 0 ], [ 0, 0, 1, 0 ], [ -cx, -cy, -cz, 1 ] ]; return (entity) => { const coordinatesList = entity.map((coordinate) => { return mathjs.multiply( mathjs.add(coordinate, [mx, my, mz, 0]), rotationZ, rotationY, rotationX, cameraTransform ) }) Object.keys(entity).forEach((key) => { if (!Number.isInteger(parseInt(key))) { coordinatesList[key] = entity[key] } }) return coordinatesList } }32:T620,anaglyphPerspectiveTransformsGivenParams = ({ near, far, cameraOffset, eyeGap, scale, xprime, yprime, horizontalShift, verticalShift }) => { return (entity) => { const left = [] const right = [] const shift = eyeGap / 2 const params = { near, far, eyeGap, scale, horizontalShift, verticalShift } const leftPerspectiveTransform = perspectiveTransformGivenParams({ ...params, side: 'left' }) const rightPerspectiveTransform = perspectiveTransformGivenParams({ ...params, side: 'right' }) entity.forEach((coordinate) => { // 1. World Space Transforms let outputLeft = coordinate let outputRight = coordinate // 2. Position the cameras outputLeft = mathjs.add(outputLeft, [0, 0, -cameraOffset, 0]) outputRight = mathjs.add(outputRight, [0, 0, -cameraOffset, 0]) outputLeft = mathjs.add(outputLeft, [-shift, 0, 0, 0]) outputRight = mathjs.add(outputRight, [shift, 0, 0, 0]) // 3. Apply the Perspective Transform outputLeft = leftPerspectiveTransform(outputLeft) outputRight = rightPerspectiveTransform(outputRight) // 4. Pan the outputs outputLeft = mathjs.add(outputLeft, [xprime, yprime, 0]) outputRight = mathjs.add(outputRight, [xprime, yprime, 0]) left.push(outputLeft) right.push(outputRight) }) // Output. left and right are an array of { x, y } points on the projection plane return { ...entity, left, right } } }33:T5bb,anaglyphRenderer = (listOfStuff) => { const leftLayer = [] const rightLayer = [] const svgStuff = listOfStuff .filter(behindProjectionPlane) .forEach((item) => { if (item.left.length > 1) { const leftPath = "M " + item.left.map(p => `${p[0]} ${p[1]}`).join(' L ') const rightPath = "M " + item.right.map(p => `${p[0]} ${p[1]}`).join(' L ') leftLayer.push(svg``) rightLayer.push(svg``) } else { if (item.text) { leftLayer.push(svg`${letterPlotter(item.text, { color: colors.left })}`) rightLayer.push(svg`${letterPlotter(item.text, { color: colors.right })}`) } else { leftLayer.push(svg``) rightLayer.push(svg``) } } }) return svg` ${leftLayer} ${rightLayer} ` }34:T4b8,viewof perspectiveParameters = { // near, zRange, eyeGap, scale const controller = view`

Camera Offset: ${["cameraOffset", Inputs.range([10, 1000], { value: 40, step: 10 })]}

Near (i.e. distance in front of the carema where we start projecting, aka. the projection plane): ${["near", Inputs.range([10, 40], { value: 20, step: 1 })]}

zRange (Far - Near) - i.e. how far past the projection plane to include: ${["zRange", Inputs.range([1, 40], { value: 20, step: 1 })]}

Eye Gap: ${["eyeGap", Inputs.range([0, 4], { value: 0.8, step: 0.01 })]}

Scale: ${["scale", Inputs.range([1, 20001], { value: 3800, step: 10 })]}

Horizontal Shift Window: ${["horizontalShift", Inputs.range([-10, 10], { value: 0, step: 0.1 })]}

Vertical Shift Window: ${["verticalShift", Inputs.range([-10, 10], { value: 0, step: 0.1 })]}

Shift in X': ${["xprime", Inputs.range([-500, 500], { value: 0, step: 1 })]}

Shift in Y': ${["yprime", Inputs.range([-500, 500], { value: 0, step: 1 })]}

` return controller }35:T494,viewof worldParameters = { // rX, rY, rZ const controller = view`

Rotation in X: ${["rX", Inputs.range([-Math.PI / 2, Math.PI / 2], { value: -Math.PI / 4, step: Math.PI / 32 })]}

Rotation in Y: ${["rY", Inputs.range([-Math.PI / 2, Math.PI / 2], { value: 0, step: Math.PI / 32 })]}

Rotation in Z: ${["rZ", Inputs.range([-Math.PI, Math.PI], { value: Math.PI / 8, step: Math.PI / 32 })]}

Shift in X: ${["mx", Inputs.range([-100, 100], { value: 0, step: 1 })]}

Shift in Y: ${["my", Inputs.range([-100, 100], { value: 0, step: 1 })]}

Shift in Z: ${["mz", Inputs.range([-100, 100], { value: 0, step: 1 })]}

Move Camera in X: ${["cx", Inputs.range([-100, 100], { value: 0, step: 1 })]}

Move Camera in Y: ${["cy", Inputs.range([-100, 100], { value: 0, step: 1 })]}

Move Camera in Z: ${["cz", Inputs.range([-100, 100], { value: 0, step: 1 })]}

` return controller }36:T7c6,intergratedRenderer = (rawScene, params, interactions) => { const world = params?.world || worldParameters const perspective = params?.perspective || perspectiveParameters const sceneInWorld = processSceneGivenParameters(rawScene, world) const sceneProjected = projectSceneGivenParameters(sceneInWorld, perspective) const el = svg`` let isMouseDown = false const defaultUpdateFn = (layerX, layerY, worldParams, perspectiveParams) => { const newRZ = -Math.PI + layerX / width * 2 * Math.PI const newRX = -Math.PI / 2 + layerY / height * Math.PI / 2 return { worldParameters: { ...worldParams, rZ: newRZ, rX: newRX }, perspectiveParameters: { ...perspectiveParams } } } const updateFn = interactions?.update || defaultUpdateFn const interactionStart = interactions?.start || (event => { event.preventDefault(); isMouseDown = true }) const interactionMove = interactions?.move || (event => { if (isMouseDown === false) return; event.preventDefault(); const update = updateFn(event.layerX, event.layerY, world, perspective) const newWorld = processSceneGivenParameters(rawScene, update.worldParameters) const newProjectedScene = projectSceneGivenParameters(newWorld, update.perspectiveParameters) el.querySelectorAll('*').forEach(n => n.remove()); el.append(anaglyphRenderer(newProjectedScene)) }) const interactionEnd = interactions?.end || (event => { isMouseDown = false }) el.addEventListener('touchstart', interactionStart) el.addEventListener('pointerdown', interactionStart) el.addEventListener('pointermove', interactionMove) el.addEventListener('pointerup', interactionEnd) return Object.assign(el, { onmousedown: interactionStart, onmousemove: interactionMove, onmouseup: interactionEnd }) }37:[] 2f:{"title":"Anaglyph Rendering in SVG","cells":[{"id":0,"value":"md`# Anaglyph Rendering in SVG\n\nI tried to [scale this up](https://observablehq.com/@tonyhschu/rendering-a-cube-in-threejs-in-svg-anaglyph) but kept running into issues with THREEjs - likely from my own misunderstanding of how it works. It did prompt me to wonder, what would it take to build just the bits of the 3D engine I need? I just want to render to an SVG, so I can send anaglyph drawings to a plotter. Hence, this whole notebook.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"md`## Rendering Pipeline`","pinned":true,"hidden":false,"mode":"ojs"},{"id":321,"value":"interactiveRenderer = {\n const el = svg``\n \n let isMouseDown = false\n \n return Object.assign(el, {\n onmousedown: event => {\n isMouseDown = true\n },\n onmousemove: event => {\n if (isMouseDown === false) return;\n \n event.preventDefault();\n \n const newRZ = -Math.PI + event.layerX / width * 2 * Math.PI\n const newRX = -Math.PI / 2 + event.layerY / height * Math.PI / 2\n \n const newWorldParams = {\n ...worldParameters,\n rZ: newRZ,\n rX: newRX\n }\n \n const newWorld = processSceneGivenParameters(scene, newWorldParams)\n const newProjectedScene = projectSceneGivenParameters(newWorld, perspectiveParameters)\n \n el.querySelectorAll('*').forEach(n => n.remove());\n el.append(anaglyphRenderer(newProjectedScene)) \n },\n onmouseup: event => {\n isMouseDown = false\n }\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"perspectiveController = html`${viewof perspectiveParameters}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":346,"value":"md`Static Renderer`","pinned":true,"hidden":false,"mode":"ojs"},{"id":240,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":264,"value":"worldController = html`${viewof worldParameters}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":416,"value":"viewof rightColor = {\n // near, zRange, eyeGap, scale \n \n const controller = view`\n \n \n \n

Red: ${[\"red\", Inputs.range([0, 255], { value: 0, step: 1 })]}

Green: ${[\"green\", Inputs.range([0, 255], { value: 255, step: 1 })]}

Blue: ${[\"blue\", Inputs.range([0, 255], { value: 235, step: 1 })]}

`\n \n return controller\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"scene = {\n let scene = []\n \n scene = scene.concat(axis(3))\n scene = scene.concat(pyramidGrid)\n \n return scene\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":202,"value":"processSceneGivenParameters = (s, params) => {\n const wt = worldTransformsGivenParams(params)\n \n return s.map(wt)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":210,"value":"scenePostWorld = processSceneGivenParameters(scene, worldParameters)","pinned":true,"hidden":false,"mode":"ojs"},{"id":228,"value":"projectSceneGivenParameters = (s, params) => {\n const processedParams = {\n ...params,\n far: params.near + params.zRange\n }\n \n const pt = anaglyphPerspectiveTransformsGivenParams(processedParams)\n \n return s.map(pt)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":206,"value":"scenePostPerspective = projectSceneGivenParameters(scenePostWorld, perspectiveParameters)","pinned":true,"hidden":false,"mode":"ojs"},{"id":313,"value":"md`# Notes\nThe rendering pipeline needs to take a bunch of objects, defined in world coordinates { x, y, z }\n\n1. World Space Transforms - Rotating the World in X, Y, and Z\n2. Apply the Perspective transform. This has a few sub parts:\n * Position the camera(s) - shift backwards, and then left/right depending on the eye\n * The anaglyph effect applys next in adjustments to the left and right alignment of the projection plane, and the \"squishing\" of the camera pyramid into a cube.\n3. Take the projected { x', y' } points, and render them as SVG paths.\n\n... this took a painfully long time to figure out.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"md`### Part 1: World Transforms`","pinned":true,"hidden":false,"mode":"ojs"},{"id":131,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":149,"value":"md`### Part 2: Perspective Transform`","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"perspectiveTransformGivenParams = ({ side, eyeGap, near, far, scale, horizontalShift, verticalShift }) => {\n // https://jsantell.com/3d-projection/\n \n const sign = (side) ? ((side === 'left') ? 1 : -1) : 0\n const hahaha = eyeGap * 0.01\n const r = 1 + hahaha * sign + horizontalShift\n const l = -1 + hahaha * sign + horizontalShift\n const t = 1 + verticalShift\n const b = -1 + verticalShift\n \n const perspectiveMatrix = [\n [2 * near / (r - l), 0, 0, 0],\n [0, 2 * near / (t - b), 0, 0],\n [(r + l) / (r - l), (t + b) / (t - b), -(far + near)/(far - near), -2 * far * near / (far - near)],\n [0, 0, -1, 0]\n ]\n \n return (coordinate) => {\n const projected = mathjs.multiply(coordinate, perspectiveMatrix)\n\n const divided = [\n projected[0] / projected[3] * scale,\n projected[1] / projected[3] * scale,\n projected[2]\n ]\n\n return divided\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":152,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":235,"value":"md`### Part 3: Renderer`","pinned":true,"hidden":false,"mode":"ojs"},{"id":304,"value":"behindProjectionPlane = (e) => {\n return e.left.map(d => d[2]).find((d => d <= 0)) === undefined &&\n e.right.map(d => d[2]).find((d => d <= 0)) === undefined\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":412,"value":"colors = Object.assign({\n left: \"red\",\n right: `rgb(${rightColor.red},${rightColor.green},${rightColor.blue})`\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":238,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":311,"value":"md`## References\n\n* [Coding Training Challenge #122: 3D Rendering with Rotation and Projection](https://www.youtube.com/watch?v=p4Iz0XJY-Qk&t=242s)\n* [How 3d rendering works :: Maths - Daniel Kreuter](https://www.youtube.com/watch?v=VywuRtNKl0c&t=7s)\n* ... and [Kreuter's fiddle](https://jsfiddle.net/rc7anccs/)\n* The [Camera Transformation](https://www.youtube.com/watch?v=mpTl003EXCY)\n* Plus [mathjs for matrix multiplication](https://mathjs.org/)\n* http://paulbourke.net/stereographics/stereorender/ - where I learned about off-axis stereorender\n* https://stackoverflow.com/questions/58615238/opengl-perspective-projection-how-to-define-left-and-right\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"md`## Parameters`","pinned":true,"hidden":false,"mode":"ojs"},{"id":400,"value":"perspectiveParameters","pinned":true,"hidden":false,"mode":"ojs"},{"id":263,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":261,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"md`## Objects`","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"box = { \n const corners = [\n [ 1, 1, 1, 1],\n [-1, 1, 1, 1],\n [-1, -1, 1, 1],\n [ 1, -1, 1, 1],\n\n [ 1, 1, -1, 1],\n [-1, 1, -1, 1],\n [-1, -1, -1, 1],\n [ 1, -1, -1, 1]\n ]\n \n const top = d3.range(4).map((i) => { return [corners[i], corners[(i + 1) % 4]] })\n const bottom = d3.range(4).map((i) => { return [corners[4 + i], corners[4 + (i + 1) % 4]] })\n const middle = d3.range(4).map((i) => { return [corners[i], corners[i + 4]] })\n \n return [].concat(top, middle, bottom)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"dotGrid = {\n const x = d3.range(-10, 10, 1)\n const y = d3.range(-10, 10, 1)\n const dots = d3.cross(x, y).map((c) => {\n c.push(0, 1)\n return [c]\n })\n \n return dots\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"pyramidGrid = {\n const rowsOfPyramids = 7\n const rangeInput = Math.floor(rowsOfPyramids / 2) * 3\n \n const x = d3.range(-rangeInput, rangeInput + 1, 3)\n const y = d3.range(-rangeInput, rangeInput + 1, 3)\n \n const origins = d3.cross(x, y).filter((c) => {\n const isMiddleX = (c[0] <= 1 && c[0] >= -1)\n const isMiddleY = (c[1] <= 1 && c[1] >= -1)\n \n return !isMiddleX || !isMiddleY\n })\n \n let list = []\n \n origins.forEach((o, i) => {\n const peak = [o[0], o[1], 2, 1]\n const pcorners = [\n [o[0] + 1, o[1] + 1, 0, 1],\n [o[0] + 1, o[1] - 1, 0, 1],\n [o[0] - 1, o[1] - 1, 0, 1],\n [o[0] - 1, o[1] + 1, 0, 1]\n ]\n\n const bottom = d3.range(4).map((i) => { return [pcorners[i], pcorners[(i + 1) % 4]] })\n const sides = d3.range(4).map((i) => { return [peak, pcorners[(i + 1) % 4]] })\n\n list = list.concat(bottom)\n list = list.concat(sides)\n })\n \n return list\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"axis = (l) => { \n const xAxis = [[0,0,0,1], [l,0,0,1]]\n xAxis.color = \"#ff0000\";\n \n const yAxis = [[0,0,0,1], [0,l,0,1]]\n yAxis.color = \"#00ff00\";\n \n const zAxis = [[0,0,0,1], [0,0,l,1]]\n zAxis.color = \"#0000ff\";\n \n const xLabel = [[l,0,0,1]]\n xLabel.text = 'x'\n \n const yLabel = [[0,l,0,1]]\n yLabel.text = 'y'\n \n const zLabel = [[0,0,l,1]]\n zLabel.text = 'z'\n \n return [xAxis, yAxis, zAxis, xLabel, yLabel, zLabel]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"md`## Exports`","pinned":true,"hidden":false,"mode":"ojs"},{"id":372,"value":"intergratedRenderer(scene, { \n world: { rX: -1, rY: 0, rZ: -0.85, mx: 0, my: 0, mz: 0 }\n},\n{ \n update: (layerX, layerY, worldParams, perspectiveParams) => {\n const newRX = -Math.PI / 2 + layerY / height * Math.PI / 2\n\n return {\n worldParameters: {\n ...worldParams,\n rX: newRX\n },\n perspectiveParameters: {\n ...perspectiveParams\n }\n }\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":446,"value":"{\n const thing = {\n a: 'hahaahah'\n }\n \n return thing?.a || 'nah'\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":367,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":103,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"import {letterPlotter} from '@tonyhschu/experiment-with-plottable-letters'","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"import {view} from '@tomlarkworthy/view'","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"mathjs = require(\"https://unpkg.com/mathjs@4.0.0/dist/math.min.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require('d3@6')","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"height = 512","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}