2b:null 2c:["$","title",null,{"children":"3D to SVG using VTK.js | Nicolas Schmidt | Observable"}] 31:T801,scene = { const { renderer, renderWindow, interactor } = renderWindowSetup(container) renderWindow.render() const reader = new FileReader() const actors = [] const camera = renderer.getActiveCamera() const projectionNormal = camera.getViewPlaneNormal() const bfFilters = [] // camera.onModified((cam) => { // if(!bfFilters.length) return // bfFilters[0].setProjectionNormal(cam.getViewPlaneNormal()) // bfFilters[0].getOutputData() // }) reader.onload = (e) => { const objReader = vtk.OBJReader.newInstance() objReader.parseAsText(reader.result) const nbOutputs = objReader.getNumberOfOutputPorts() // < nbOutputs for (let idx = 0; idx < nbOutputs; idx++){ const mapper = vtk.Mapper.newInstance() const actor = vtk.Actor.newInstance() const bfFilter = backfaceFilter.newInstance({projectionNormal}) bfFilter.setInputConnection(objReader.getOutputPort(idx)) bfFilters.push(bfFilter) mapper.setInputConnection(bfFilter.getOutputPort()) actor.setMapper(mapper) const property = actor.getProperty() property.setDiffuseColor([1.0,0.0,0.0]) property.setEdgeVisibility(false) renderer.addActor(actor) actors.push(actor) const psMapper = vtk.PixelSpaceCallbackMapper.newInstance() psMapper.setInputConnection(bfFilter.getOutputPort()) psMapper.setCallback((coordsList, camera) => { let p2 = coordsList.map((xy, idx) => ({ id: idx, x: xy[0], y: height - xy[1], z: xy[2], }) ) // this will need to change when we have multiple objects mutable points2 = p2 }) const psActor = vtk.Actor.newInstance() psActor.setMapper(psMapper) renderer.addActor(psActor) } renderer.resetCamera() renderWindow.render() } reader.readAsText(file) renderer.resetCamera() renderWindow.render() return {actors, renderer, renderWindow} }32:T9d1,{ const svg = d3.create("svg") .attr("width", "100%") .attr("height", height) if (scene.actors.length < 1) return const conePolys = scene.actors[0].get().mapper.get().inputData[0].get().polys const polys = conePolys.get().values let size = 0 let offset = 0 const backfaces = [] const cells = polys.reduce((p,c,i,a) => { if(size + offset === i){ // read size size = c offset = i + 1 // create new cell p.push([]) } else { // add to the last cell p[p.length - 1].push(points2[c]) } // backface culling right here // Only planning to support tris although vtkjs polys can be ngons if(i - offset === size - 1) { const {vec3} = glMatrix let [p0, p1, p2] = p[p.length - 1].map(p => vec3.fromValues(p.x, p.y, p.z)) let a = vec3.sub(vec3.create(), p0, p1) let b = vec3.sub(vec3.create(), p0, p2) let normal = vec3.normalize(vec3.create(), vec3.cross(vec3.create(), a, b)) const camera = scene.renderer.getActiveCamera() const vn = camera.getViewPlaneNormal() const vnvec = vec3.normalize(vec3.create(), vec3.fromValues(vn[0], vn[1], vn[2])) let dot = vec3.dot(vnvec, normal) // if normal is facing away from camera remove cell if (Math.acos(dot) < Math.PI / 2) { backfaces.push(p.pop()) } } return p }, []) let line = d3.line() .x((d) => d.x) .y((d) => d.y) svg.selectAll("path") .data(backfaces, d => d[0].id + '-' + d[1].id + '-' + d[2].id) .enter() .append("path") .attr("d", d => line(d.map(v => ({x: v.x + 150, y: v.y}))) + "Z") .attr("fill", "blue") .attr("opacity", 0.2) svg.selectAll("path") .data(cells, d => d[0].id + '-' + d[1].id + '-' + d[2].id) .enter() .append("path") .attr("d", d => line(d) + "Z") .attr("fill", "red") .attr("stroke", "black") .attr("opacity", 0.5) // in case one wants to mark and label vers // let points = svg.selectAll("circle").data(points2, d => d.id).enter().append("g") // points.append("circle") // .attr("class", "point") // .attr("cx", (d) => d.x) // .attr("cy", (d) => d.y) // .attr("r", 3) // .attr("fill", "blue") // points.append("text") // .attr("visibility", vertsLabel ? "visible" : "hidden") // .attr("color", "black") // .attr("x", d => d.x) // .attr("y", d => d.y) // .text(d => d.id) return svg.node() }33:Tcec,backfaceFilter = { const DEFAULT_VALUES = { // projectionNormal: undefined, } // https://kitware.github.io/vtk-js/api/Filters_General_TriangleFilter.html const extend = (publicAPI, model, initialValues = {}) => { Object.assign(model, DEFAULT_VALUES, initialValues) vtkjs.macro.setGet(publicAPI, model, []) vtkjs.macro.obj(publicAPI, model) vtkjs.macro.algo(publicAPI, model, 1, 1) backFaceFilter(publicAPI, model) } const backFaceFilter = (publicAPI, model) => { model.classHierarchy.push('backfaceFilter') publicAPI.requestData = (inData, outData) => { const input = inData[0] const points = input.getPoints().getData() const polys = input.getPolys().getData() const cellsDataType = input.getPolys().getDataType() const pointsDataType = input.getPoints().getDataType() const newCells = [] const newPoints = [] // triangulation if (polys) { let npts = 0; let isLastPointDuplicated = false; for (let c = 0; c < polys.length; c += npts + 1) { npts = polys[c]; // If the first point is duplicated at the end of the cell, ignore it isLastPointDuplicated = polys[c + 1] === polys[c + npts]; if (isLastPointDuplicated) { --npts; } // We can't use cell.map here, it doesn't seems to work properly with Uint32Arrays const cellPoints = []; cellPoints.length = npts; for (let i = 0; i < npts; i++) { const pointId = polys[c + i + 1]; cellPoints[i] = [ points[3 * pointId], points[3 * pointId + 1], points[3 * pointId + 2], ]; } if (npts === 3) { const newIdStart = newPoints.length / 3; newCells.push(3, newIdStart, newIdStart + 1, newIdStart + 2); newPoints.push(...cellPoints[0], ...cellPoints[1], ...cellPoints[2]); } else if (npts > 3) { const polygon = vtk.Polygon.newInstance(); polygon.setPoints(cellPoints); // if (!polygon.triangulate()) { // vtkWarningMacro(`Triangulation failed at cellOffset ${c}`); // ++model.errorCount; // } const newCellPoints = polygon.getPointArray(); const numSimplices = Math.floor(newCellPoints.length / 9); const triPts = []; triPts.length = 9; for (let i = 0; i < numSimplices; i++) { for (let j = 0; j < 9; j++) { triPts[j] = newCellPoints[9 * i + j]; } const newIdStart = newPoints.length / 3; newCells.push(3, newIdStart, newIdStart + 1, newIdStart + 2); newPoints.push(...triPts); } } if (isLastPointDuplicated) { ++npts; } } } const dataset = vtk.PolyData.newInstance() dataset .getPoints() .setData(vtkjs.macro.newTypedArrayFrom(pointsDataType, newPoints)) dataset .getPolys() .setData(vtkjs.macro.newTypedArrayFrom(cellsDataType, newCells)) outData[0] = dataset // outData[0] = input } } const newInstance = vtkjs.macro.newInstance(extend, 'backfaceFilter') return { newInstance, extend } }34:T415,vtk = ({ RenderWindow : vtkjs.Rendering.Core.vtkRenderWindow, Renderer : vtkjs.Rendering.Core.vtkRenderer, OpenGLRenderWindow: vtkjs.Rendering.OpenGL.vtkRenderWindow, RenderWindowInteractor: vtkjs.Rendering.Core.vtkRenderWindowInteractor, InteractorStyleTrackballCamera: vtkjs.Interaction.Style.vtkInteractorStyleTrackballCamera, DataAccessHelper : vtkjs.IO.Core.DataAccessHelper, HTTPSceneLoader : vtkjs.IO.Core.vtkHttpSceneLoader, Actor: vtkjs.Rendering.Core.vtkActor, Calculator: vtkjs.Filters.General.vtkCalculator, ConeSource: vtkjs.Filters.Sources.vtkConeSource, Mapper: vtkjs.Rendering.Core.vtkMapper, AttributeTypes: vtkjs.Common.DataModel.vtkDataSetAttributes.AttributeTypes, FieldDataTypes: vtkjs.Common.DataModel.vtkDataSet.FieldDataTypes, MatrixBuilder: vtkjs.Common.Core.vtkMatrixBuilder, PixelSpaceCallbackMapper: vtkjs.Rendering.Core.vtkPixelSpaceCallbackMapper, OBJReader: vtkjs.IO.Misc.vtkOBJReader, PolyData: vtkjs.Common.DataModel.vtkPolyData, Polgyon: vtkjs.Common.DataModel.vtkPolygon, })35:[{"id":"c69c272febbe4fed8fef220b6f60d30ccd4ce7828fba0d82fb33fb6e6ca1a9a85640877fb54a6677f0479710c52a5d9fe8ea36cacc1d6eab7bfbece55eda85a8","href":"https://static.observableusercontent.com/files/c69c272febbe4fed8fef220b6f60d30ccd4ce7828fba0d82fb33fb6e6ca1a9a85640877fb54a6677f0479710c52a5d9fe8ea36cacc1d6eab7bfbece55eda85a8","name":"Trunk@1.obj","type":"application/octet-stream","lastModified":1637696293885.534,"size":135496}] 2f:{"id":"025a789b348f6bbc","slug":null,"title":"3D to SVG using VTK.js","thumbnail":"83859d5b438a9a7d0233b80801166caecfb04f1f9fb2fe914241ad4e92066276","access_level":"public","create_time":"$D2021-11-22T03:12:21.946Z","update_time":"$D2023-05-29T19:50:09.712Z","view_time":null,"first_public_time":"$D2023-05-29T19:48:40.616Z","has_unpublished_edits":null,"fork":{"id":"2fcc22dea33cc7df","slug":"vtkjs-in-observable","title":"Using VTK.js in Observable","owner":{"id":"57799c7dfb47a7cc","login":"ngimbal","name":"Nicolas Schmidt"}},"stars":0,"starred":false,"owner":{"type":"team","id":"57799c7dfb47a7cc","login":"ngimbal","name":"Nicolas Schmidt","avatar_url":"https://avatars-next.observableusercontent.com/509a135bcff70b7551312b472ac5f66624c1a6a9ef3fd17866e13bba9110cd8b","tier":"starter_2024"},"version":1304,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"56ee54164d4582ce","login":"ngimbal","name":"Nicolas Schmidt","avatar_url":"https://avatars-next.observableusercontent.com/509a135bcff70b7551312b472ac5f66624c1a6a9ef3fd17866e13bba9110cd8b","tier":null}],"members":[{"type":"individual","id":"56ee54164d4582ce","login":"ngimbal","name":"Nicolas Schmidt","avatar_url":"https://avatars-next.observableusercontent.com/509a135bcff70b7551312b472ac5f66624c1a6a9ef3fd17866e13bba9110cd8b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"3D to SVG using VTK.js","cells":[{"id":0,"value":"# 3D to SVG using VTK.js","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"Vtk.js is an open source javascript library for manipulating and rendering scientific data built on the Visualization Toolkit (VTK) by Kitware. This notebook demonstrates how to use vtk.js data in an svg context.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":803,"value":"A Visibility Algorithgm for Converting 3D Meshes into Editable 2D Vector Graphics","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":710,"value":"file = await FileAttachment(\"Trunk@1.obj\").blob()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"Create the image and expose the renderer, renderWindow and interactor objects","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"container = {\n const container = DOM.element('div')\n container.style.width = '100%'\n container.style.height = height + 'px'\n\n return container\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"Function to set up the render window.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"renderWindowSetup = (container) => {\n // Standard rendering code setup\n const renderWindow = vtk.RenderWindow.newInstance();\n const renderer = vtk.Renderer.newInstance({});\n renderer.setBackgroundFrom([1.0, 1.0, 1.0, 1.0]);\n\n renderWindow.addRenderer(renderer);\n\n // Use OpenGL as the backend to view the all this\n const openglRenderWindow = vtk.OpenGLRenderWindow.newInstance();\n renderWindow.addView(openglRenderWindow);\n\n openglRenderWindow.setContainer(container);\n\n // Capture size of the container and set it to the renderWindow\n const { width, height } = container.getBoundingClientRect();\n\n openglRenderWindow.setSize(width, height);\n\n // Setup an interactor to handle mouse events\n const interactor = vtk.RenderWindowInteractor.newInstance();\n interactor.setInteractorStyle(\n vtk.InteractorStyleTrackballCamera.newInstance()\n );\n interactor.setView(openglRenderWindow);\n interactor.initialize();\n interactor.bindEvents(container);\n\n return { renderer, renderWindow, interactor };\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"Create the geometry and expose the points2 & vtkActor","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"Use Observable's mutable state to update points2","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"mutable points2 = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"### Constants","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"height = 350","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"### Other Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"import {localFileInput} from '@mbostock/localfile'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"glMatrix = import('https://unpkg.com/gl-matrix@3.4.3/esm/index.js?module')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":966,"value":"