2e:null 2f:["$","title",null,{"children":"Anaglyph Pipeline in GPUjs | Tony Chu | Observable"}] 34:T764,anaglyphRenderer = (processedScene) => { const leftLayer = [] const rightLayer = [] const behindProjectionPlane = (item) => { return item.map(points => { points.map(d => d[0][2]).find((d => d <= 0)) === undefined && points.map(d => d[1][2]).find((d => d <= 0)) === undefined }) return true } let allLeftPath = '' let allRightPath = '' const svgStuff = processedScene .filter(behindProjectionPlane) .forEach((item) => { if (item.length > 1) { const leftPath = "M " + item.map(p => `${p[0][0]} ${p[0][1]}`).join(' L ') const rightPath = "M " + item.map(p => `${p[1][0]} ${p[1][1]}`).join(' L ') allLeftPath += ' ' + leftPath allRightPath += ' ' + rightPath } 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``) } } }) if (allLeftPath !== '') { leftLayer.push(svg``) } if (allRightPath !== '') { rightLayer.push(svg``) } return svg` ${leftLayer} ${rightLayer} ` }35:Tb19,processScene = (scene, parameters) => { let flattenedScene = prepareForGPU(scene) const translateVector = [parameters.mx, parameters.my, parameters.mz, 0] const wtMatrix = worldTransformMatrixFn(parameters) const apMatrices = anaglyphPerspectiveMatricesFn(parameters) const processChunk = (chunk) => { const translationKernel = gpu.createKernel(function(points, translate) { let sum = 0; sum += points[this.thread.y][this.thread.x] + translate[this.thread.x] return sum; }) .setPipeline(true) .setOutput([4, chunk.length]); const worldTransformKernel = gpu.createKernel(function(points, worldTransformMatrix) { let sum = 0; for (let i = 0; i < 4; i++) { sum += points[this.thread.y][i] * worldTransformMatrix[i][this.thread.x]; } return sum; }) .setPipeline(true) .setOutput([4, chunk.length]); const eyeShiftKernel = gpu.createKernel(function(points, shift, cameraOffset) { let sideShift = (this.thread.x === 0) ? shift[this.thread.y] : 0 let cOffset = (this.thread.x === 2) ? -cameraOffset : 0 return points[this.thread.z][this.thread.x] + sideShift + cOffset }) .setPipeline(true) .setOutput([4, 2, chunk.length]) const anaglyphPerspectiveKernel = gpu.createKernel(function(points, anaglyphPerspectiveMatrices) { let sum = 0; for (let i = 0; i < 4; i++) { sum += points[this.thread.z][this.thread.y][i] * anaglyphPerspectiveMatrices[this.thread.y][i][this.thread.x] } return sum; }) .setPipeline(true) .setOutput([4, 2, chunk.length]) const divisionKernel = gpu.createKernel(function(points, scale) { const factor = (this.thread.x <= 1) ? scale / points[this.thread.z][this.thread.y][3] : 1 return points[this.thread.z][this.thread.y][this.thread.x] * factor }).setOutput([3, 2, chunk.length]) return divisionKernel(anaglyphPerspectiveKernel(eyeShiftKernel(worldTransformKernel(translationKernel(chunk, translateVector), wtMatrix), [-parameters.eyeGap / 2, parameters.eyeGap / 2], parameters.cameraOffset), apMatrices), parameters.scale) } // Divide and Conquer const maxTextureSize = 16384 const numOfChunks = Math.ceil(flattenedScene.length / maxTextureSize) const chunks = d3.range(numOfChunks).map((i) => { return flattenedScene.splice(0, maxTextureSize) }) .map(processChunk) let flatResults = [].concat.apply([], chunks); // Group back into entities in the scene const results = scene.map((entity) => { const anaglyphPoints = flatResults.splice(0, entity.length) Object.keys(entity).forEach((key) => { if (!Number.isInteger(parseInt(key))) { anaglyphPoints[key] = entity[key] } }) return anaglyphPoints }) return results }36:[] 32:{"id":"9eef50310b526a7a","slug":"anaglyph-pipeline-in-gpujs","title":"Anaglyph Pipeline in GPUjs","thumbnail":"b5e474a24eb2d4542110341b5a192b6860217e8b07300aaf3debb13897177f03","access_level":"public","create_time":"$D2021-06-07T02:59:19.426Z","update_time":"$D2021-06-19T04:40:22.265Z","view_time":null,"first_public_time":"$D2021-06-11T03:27:19.413Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"d23b8bbc584a6b18","login":"tonyhschu","name":"Tony Chu","avatar_url":"https://avatars-next.observableusercontent.com/28b9276723f510612a9ffc80e179b2b8ae42addb9ebf8b0b714e8b2c8db98c30","tier":"starter_2024"},"version":444,"publish_version":444,"role":null,"authored":false,"authors":[{"type":"individual","id":"a469f43f1f5e7f92","login":"tonyhschu","name":"Tony Chu","avatar_url":"https://avatars-next.observableusercontent.com/28b9276723f510612a9ffc80e179b2b8ae42addb9ebf8b0b714e8b2c8db98c30","tier":null}],"members":[{"type":"individual","id":"a469f43f1f5e7f92","login":"tonyhschu","name":"Tony Chu","avatar_url":"https://avatars-next.observableusercontent.com/28b9276723f510612a9ffc80e179b2b8ae42addb9ebf8b0b714e8b2c8db98c30","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Anaglyph Pipeline in GPUjs","cells":[{"id":0,"value":"md`# Anaglyph Pipeline in GPUjs`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"worldController","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"renderer(pyramidGrid, parameters)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"renderer = (scene, parameters) => {\n return svg``\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"perspectiveController","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"colors = Object.assign({left: \"red\", right: \"rgb(0,255,235)\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"// processedScene = processScene(chunksOfStuff[0], parameters)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"scene","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"pyramidGrid = {\n const rowsOfPyramids = 35\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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"prepareForGPU(scene)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"prepareForGPU(pyramidGrid)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"chunksOfStuff = {\n const longArray = prepareForGPU(pyramidGrid)\n const maxTextureSize = 16384\n \n const numOfChunks = Math.ceil(longArray.length / maxTextureSize)\n \n return d3.range(numOfChunks).map((i) => {\n return longArray.splice(0, maxTextureSize)\n })\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"prepareForGPU = (scene) => {\n const flatten = [].concat.apply([], scene)\n return flatten\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"md`# Prototyping`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"pointsArray = {\n return [\n [0, 0, 0, 1],\n [3, 0, 0, 1],\n [0, 3, 0, 1],\n [0, 0, 3, 1],\n [3, 3, 3, 1],\n ]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"one = translatePoints(pointsArray, translate)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"two = applyWorldTransforms(one, [\n [1, 0, 0, 0],\n [0, 1, 0, 0],\n [0, 0, 1, 0],\n [0, 0, 0, 1]\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"three = applyShiftTransform(two, [-0, 0], parameters.cameraOffset)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"four = applyAnaglyphPerspectiveTransforms(three, anaglyphPerspectiveMatrices)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"five = applyDivision(four, 1000)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"applyAnaglyphPerspectiveTransforms = gpu.createKernel(function(points, anaglyphPerspectiveMatrices) {\n let sum = 0;\n\n for (let i = 0; i < 4; i++) {\n sum += points[this.thread.z][this.thread.y][i] * anaglyphPerspectiveMatrices[this.thread.y][i][this.thread.x]\n }\n\n return sum;\n}).setOutput([4, 2, pointsArray.length])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"applyShiftTransform = gpu.createKernel(function(points, shift, cameraOffset) {\n let sideShift = (this.thread.x === 0) ? shift[this.thread.y] : 0\n let cOffset = (this.thread.x === 2) ? -cameraOffset : 0\n return points[this.thread.z][this.thread.x] + sideShift + cOffset\n})\n.setOutput([4, 2, pointsArray.length])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"applyDivision = gpu.createKernel(function(points, scale) {\n const factor = (this.thread.x <= 1) ? scale / points[this.thread.z][this.thread.y][3] : 1\n\n return points[this.thread.z][this.thread.y][this.thread.x] * factor\n}).setOutput([3, 2, pointsArray.length])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"applyWorldTransforms = gpu.createKernel(function(points, worldTransformMatrix) {\n let sum = 0;\n\n //sum += points[this.thread.y][this.thread.x] + translate[this.thread.x]\n \n for (let i = 0; i < 4; i++) {\n // sum += a[this.thread.y][i] * b[i][this.thread.x];\n sum += points[this.thread.y][i] * worldTransformMatrix[i][this.thread.x];\n }\n\n return sum;\n})\n.setOutput([4, pointsArray.length]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"results2 = applyAnaglyphPerspectiveTransforms(pointsArray, anaglyphPerspectiveMatrices)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"testMatrices = [\n [\n [1, 0, 0, 0],\n [0, 1, 0, 0],\n [0, 0, 1, 0],\n [0, 0, 0, 1]\n ],\n [\n [1, 0, 0, 0],\n [0, 1, 0, 0],\n [0, 0, 1, 0],\n [0, 0, 0, 1]\n ]\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"anaglyphPerspectiveMatrices = anaglyphPerspectiveMatricesFn(parameters)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"anaglyphPerspectiveMatricesFn = ({ eyeGap, near, zRange, scale, horizontalShift, verticalShift }) => {\n const far = near + zRange\n \n const generateMatrix = (sign) => {\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 return [\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 \n return [\n generateMatrix(1),\n generateMatrix(-1)\n ]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"translatePoints = gpu.createKernel(function(points, translate\n // , worldTransformMatrix, mx, my, mz, cameraOffset, near, zRange, eyeGap, \n // scale, horizontalShift, verticalShift, xprime, yprime \n) {\n let sum = 0;\n\n sum += points[this.thread.y][this.thread.x] + translate[this.thread.x]\n \n /*\n for (let i = 0; i < 4; i++) {\n // sum += a[this.thread.y][i] * b[i][this.thread.x];\n }\n */\n\n return sum;\n})\n.setOutput([4, pointsArray.length]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"translate = [parameters.mx, parameters.my, parameters.mz, 0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"worldTransformMatrix = worldTransformMatrixFn(parameters)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"worldTransformMatrixFn = ({ rX, rY, rZ, cx, cy, cz }) => {\n const rotationX = [\n [ 1, 0, 0, 0],\n [ 0, Math.cos(rX), -Math.sin(rX), 0],\n [ 0, Math.sin(rX), Math.cos(rX), 0],\n [ 0, 0, 0, 1]\n ]\n \n const rotationY = [\n [ Math.cos(rY), 0, Math.sin(rY), 0 ],\n [ 0, 1, 0, 0 ],\n [ -Math.sin(rY), 0, Math.cos(rY), 0 ],\n [ 0, 0, 0, 1 ]\n ]\n \n const rotationZ = [\n [ Math.cos(rZ), -Math.sin(rZ), 0, 0 ],\n [ Math.sin(rZ), Math.cos(rZ), 0, 0 ],\n [ 0, 0, 1, 0 ],\n [ 0, 0, 0, 1 ]\n ]\n \n const cameraTransform = \n [\n [ 1, 0, 0, 0 ],\n [ 0, 1, 0, 0 ],\n [ 0, 0, 1, 0 ],\n [ -cx, -cy, -cz, 1 ]\n ];\n \n return mathjs.multiply(rotationZ, rotationY, rotationX, cameraTransform)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"parameters = Object.assign({ ...worldParameters, ...perspectiveParameters })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"gpu = new GPU.GPU();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"import {letterPlotter} from '@tonyhschu/experiment-with-plottable-letters'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"import { worldParameters, perspectiveParameters, perspectiveController, worldController, scene } from '@tonyhschu/anaglyph-rendering-in-svg'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"GPU = require(\"gpu.js@2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"height = 512","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"mathjs = require(\"https://unpkg.com/mathjs@4.0.0/dist/math.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"