30:Ta29,view = { // 2. Contenedor HTML const container = html`

`; const numPoints = complex.positions.length; const numCells = complex.cells.length; // A. Pre-asignar memoria exacta (Mucho más rápido que .flat()) const pointsArray = new Float32Array(numPoints * 3); const cellsArray = new Uint32Array(numCells * 4); // 4 indices por celda: [3, i, j, k] for (let i = 0; i < numPoints; i++) { const [x, y, z] = complex.positions[i]; // Llenar posiciones plano pointsArray[i * 3] = x; pointsArray[i * 3 + 1] = y; pointsArray[i * 3 + 2] = z; } // C. Llenado de Celdas (Topología) // Formato VTK para triángulos: [3, id1, id2, id3, 3, id4, id5, id6...] for (let i = 0; i < numCells; i++) { const cell = complex.cells[i]; const offset = i * 4; cellsArray[offset] = 3; // Número de vértices en el triángulo cellsArray[offset + 1] = cell[0]; cellsArray[offset + 2] = cell[1]; cellsArray[offset + 3] = cell[2]; } // Crear la Malla (PolyData) const polyData = vtk.Common.DataModel.vtkPolyData.newInstance(); polyData.getPoints().setData(pointsArray, 3); polyData.getPolys().setData(cellsArray); // --- PIPELINE DE RENDERIZADO SIMPLIFICADO --- // Usamos GenericRenderWindow para evitar configurar OpenGL manualmente const genericRenderWindow = vtk.Rendering.Misc.vtkGenericRenderWindow.newInstance(); genericRenderWindow.setContainer(container); // Obtenemos el renderer que genericRenderWindow creó por nosotros const renderer = genericRenderWindow.getRenderer(); const renderWindow = genericRenderWindow.getRenderWindow(); // Mapper y Actor const mapper = vtk.Rendering.Core.vtkMapper.newInstance(); mapper.setInputData(polyData); const actor = vtk.Rendering.Core.vtkActor.newInstance(); actor.setMapper(mapper); actor.getProperty().setColor(0.0, 1.0, 1.0); // Cyan actor.getProperty().setEdgeVisibility(true); // Añadir a la escena renderer.addActor(actor); renderer.resetCamera(); renderer.setBackground(0.1, 0.1, 0.1); // Renderizar genericRenderWindow.resize(); // --- LIMPIEZA Y EVENTOS --- // Manejo de redimensionamiento automático const resizeObserver = new ResizeObserver(() => { genericRenderWindow.resize(); }); resizeObserver.observe(container); // Limpieza al recalcular la celda en Observable invalidation.then(() => { resizeObserver.disconnect(); genericRenderWindow.delete(); // Esto borra todo (opengl, interactor, etc.) }); /* */ return container; }31:T257b,surfaceNets = { // --- Tablas Estáticas (Pre-cálculo) --- // Tabla de aristas del cubo (Int32) const cubeEdges = new Int32Array(24); // Tabla de aristas intersectadas (Int32) const edgeTable = new Int32Array(256); // Tabla inversa para evitar divisiones en tiempo de ejecución (1/1, 1/2, ... 1/12) const invCountTable = new Float32Array(13); { let k = 0; for (let i = 0; i < 8; ++i) { for (let j = 1; j <= 4; j <<= 1) { const p = i ^ j; if (i <= p) { cubeEdges[k++] = i; cubeEdges[k++] = p; } } } for (let i = 0; i < 256; ++i) { let em = 0; for (let j = 0; j < 24; j += 2) { const a = !!(i & (1 << cubeEdges[j])); const b = !!(i & (1 << cubeEdges[j + 1])); em |= a !== b ? 1 << (j >> 1) : 0; } edgeTable[i] = em; } // Pre-calcular inversos invCountTable[0] = 0; // No usado for (let i = 1; i < 13; i++) { invCountTable[i] = 1.0 / i; } } // Buffer reutilizable para índices de vértices (caché de fila) let buffer = new Int32Array(4096); /** * Genera una malla isosuperficie usando SurfaceNets. * @param {TypedArray} data - Datos volumétricos planos. * @param {Array} dims - [x, y, z]. * @param {number} isolevel - Valor de corte. * @param {Array>} bounds - Límites físicos. */ const surfaceNets = (data, dims, isolevel, bounds) => { // Validación de límites if (!bounds) bounds = [[0, 0, 0], dims]; const [dimX, dimY, dimZ] = dims; // Pre-calcular constantes de escalado (factorizando la inversión) const scaleX = (bounds[1][0] - bounds[0][0]) / dimX; const scaleY = (bounds[1][1] - bounds[0][1]) / dimY; const scaleZ = (bounds[1][2] - bounds[0][2]) / dimZ; const shiftX = bounds[0][0]; const shiftY = bounds[0][1]; const shiftZ = bounds[0][2]; // Strides para navegación plana const strideX = 1; const strideY = dimX; const strideZ = dimX * dimY; // Asignación inicial de memoria (Heurística: dims^2 * factor) // Se usa 'let' para permitir reasignación al redimensionar let vertices = new Float32Array(4096 * 3); let faces = new Int32Array(4096 * 4); // Formato VTK: 4 ints por poli let vCount = 0; let fCount = 0; // Tabla de pasos para buscar vecinos en el buffer // R[0]=1 no se usa realmente, R[1]=fila actual, R[2]=slice anterior const R = new Int32Array([1, dimX + 1, (dimX + 1) * (dimY + 1)]); // Buffer de valores de la grilla (8 esquinas) const grid = new Float32Array(8); // Redimensionar buffer de caché si la dimensión X*Y creció if (R[2] * 2 > buffer.length) { buffer = new Int32Array(R[2] * 2); } buffer.fill(0); let bufNo = 1; let n = 0; // Contador global de posición lineal (opcional, pero útil para debug) // --- Bucle Z --- for (let z = 0; z < dimZ - 1; ++z, n += dimX, bufNo ^= 1, R[2] = -R[2]) { // Puntero base en el buffer de índices let m = 1 + (dimX + 1) * (1 + bufNo * (dimY + 1)); const worldZ = z * scaleZ + shiftZ; const ptrZ = z * strideZ; // --- Bucle Y --- for (let y = 0; y < dimY - 1; ++y, ++n, m += 2) { const worldY = y * scaleY + shiftY; const ptrY = ptrZ + y * strideY; // --- Optimización: Inicializar estado del registro para X=0 --- // Leemos la "cara derecha" del cubo anterior (que no existe) // para simularla como "cara izquierda" del primero. // En realidad, solo leemos la cara izquierda del primer cubo explícitamente. let p0 = data[ptrY] - isolevel; // 0,0,0 let p1 = data[ptrY + strideY] - isolevel; // 0,1,0 let p2 = data[ptrY + strideZ] - isolevel; // 0,0,1 let p3 = data[ptrY + strideY + strideZ] - isolevel; // 0,1,1 // Máscara parcial de la cara izquierda (bits 0, 2, 4, 6) let maskLeft = 0; if (p0 < 0) maskLeft |= 1; // Bit 0 if (p1 < 0) maskLeft |= 4; // Bit 2 if (p2 < 0) maskLeft |= 16; // Bit 4 if (p3 < 0) maskLeft |= 64; // Bit 6 // Guardamos estos valores en el array grid en las posiciones "Izquierda" grid[0] = p0; grid[2] = p1; grid[4] = p2; grid[6] = p3; // --- Bucle X --- for (let x = 0; x < dimX - 1; ++x, ++n, ++m) { // 1. Register Shift: Lo que era "Nuevo" (Derecha) ahora es "Viejo" (Izquierda) // Pero como ya tenemos grid[0,2,4,6] poblado y maskLeft listo, // solo necesitamos leer los vecinos en X+1 (Derecha) const ptrNextX = ptrY + (x + 1); // Puntero a la siguiente columna // Leer 4 nuevos valores (Cara Derecha: bits 1, 3, 5, 7) const val0 = data[ptrNextX] - isolevel; const val1 = data[ptrNextX + strideY] - isolevel; const val2 = data[ptrNextX + strideZ] - isolevel; const val3 = data[ptrNextX + strideY + strideZ] - isolevel; // Construir máscara de la parte derecha let maskRight = 0; if (val0 < 0) maskRight |= 2; // Bit 1 if (val1 < 0) maskRight |= 8; // Bit 3 if (val2 < 0) maskRight |= 32; // Bit 5 if (val3 < 0) maskRight |= 128; // Bit 7 // Combinar máscaras const mask = maskLeft | maskRight; // Actualizar grid (poner nuevos valores a la derecha) grid[1] = val0; grid[3] = val1; grid[5] = val2; grid[7] = val3; // Preparar para la siguiente iteración (Shift) // La máscara derecha actual se convierte en la izquierda de la sig iteración. // PERO debemos ajustar los bits: Bit 1->0, 3->2, 5->4, 7->6. maskLeft = maskRight >> 1; // Mover valores en el array grid: Derecha -> Izquierda grid[0] = val0; grid[2] = val1; grid[4] = val2; grid[6] = val3; // Early Exit: Si el cubo está totalmente dentro o fuera if (mask === 0 || mask === 0xff) continue; const edgeMask = edgeTable[mask]; let eCount = 0; let vx = 0.0, vy = 0.0, vz = 0.0; // Procesar intersecciones de aristas // Loop desenrollado manualmente sería excesivo en JS moderno (JIT lo hace), // mantenemos el loop 'for' para claridad y tamaño de código. for (let i = 0; i < 12; ++i) { if (!(edgeMask & (1 << i))) continue; eCount++; const e0 = cubeEdges[i << 1]; const e1 = cubeEdges[(i << 1) + 1]; const g0 = grid[e0]; const g1 = grid[e1]; let t = g0 - g1; // Comparación epsilon simplificada if (Math.abs(t) > 1e-6) { t = g0 / t; } else { continue; } // Interpolación optimizada let kBit = 1; // X let a = e0 & kBit, b = e1 & kBit; vx += a !== b ? (a ? 1.0 - t : t) : a ? 1.0 : 0.0; kBit <<= 1; // Y a = e0 & kBit; b = e1 & kBit; vy += a !== b ? (a ? 1.0 - t : t) : a ? 1.0 : 0.0; kBit <<= 1; // Z a = e0 & kBit; b = e1 & kBit; vz += a !== b ? (a ? 1.0 - t : t) : a ? 1.0 : 0.0; } // Optimización: Multiplicación inversa en lugar de división const s = invCountTable[eCount]; // Redimensionar vertices si es necesario if (vCount * 3 + 3 >= vertices.length) { const newV = new Float32Array(vertices.length * 2); newV.set(vertices); vertices = newV; } // Escribir vértice buffer[m] = vCount; vertices[vCount * 3] = (x + vx * s) * scaleX + shiftX; vertices[vCount * 3 + 1] = worldY + vy * s * scaleY; vertices[vCount * 3 + 2] = worldZ + vz * s * scaleZ; vCount++; // --- Generación de Caras (Formato VTK) --- for (let i = 0; i < 3; ++i) { if (!(edgeMask & (1 << i))) continue; const iu = (i + 1) % 3; const iv = (i + 2) % 3; // Selección de coordenadas ortogonales const uCurr = i === 0 ? y : i === 1 ? z : x; const vCurr = i === 0 ? z : i === 1 ? x : y; if (uCurr === 0 || vCurr === 0) continue; const du = R[iu]; const dv = R[iv]; // Redimensionar caras (8 ints = 2 triángulos VTK) if (fCount + 8 >= faces.length) { const newF = new Int32Array(faces.length * 2); newF.set(faces); faces = newF; } const a = buffer[m]; const b = mask & 1 ? buffer[m - du] : buffer[m - dv]; const c = mask & 1 ? buffer[m - dv] : buffer[m - du]; const d = buffer[m - du - dv]; // Escribir Quad como 2 triángulos VTK [3, id, id, id] // Triángulo 1 faces[fCount++] = 3; faces[fCount++] = a; faces[fCount++] = b; faces[fCount++] = c; // Triángulo 2 faces[fCount++] = 3; faces[fCount++] = c; faces[fCount++] = b; faces[fCount++] = d; } } } } return { positions: vertices.subarray(0, vCount * 3), cells: faces.subarray(0, fCount) }; }; return surfaceNets; }32:[] 2e:{"title":"Surface Nets Example","cells":[{"id":0,"value":"md`# Surface Nets Example\n\nPorted from [the README](https://github.com/mikolalysenko/surface-nets)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"# TODO\n- fix the issue of reseted angle when n changes.\n- make an efficient surface nets algorithm that uses typed array.\n- implement visualization from [here](https://observablehq.com/d/2936e0bce1a946c7)\n- take into account the 3D from [here](https://observablehq.com/@esperanc/implicit-surfaces)\n- use vtk instead [example](https://observablehq.com/@fil/elevation-vtk-js)","pinned":false,"hidden":false,"mode":"md"},{"id":229,"value":"viewof n = Inputs.range([14, 128], { label: \"n\", step: 2, value: 32 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"viewof method = Inputs.select(isoSurfaceMethods, {\n label: \"Select method\",\n value: isoSurfaceMethods[1]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":462,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":492,"value":"Object.entries(vtk.Common.DataModel.vtkPolyData.newInstance())","pinned":true,"hidden":false,"mode":"ojs"},{"id":452,"value":"isoSurfaceMethods = [\"marchingCubes\", \"surfaceNets\", \"marchingTetrahedra\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"isosurface = import(\"https://cdn.jsdelivr.net/npm/isosurface@latest/+esm\").then(\n (Module) => Module\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"myFun = (x, y, z) => x ** 2 + y ** 2 + z ** 2 - 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"complex = {\n const fn = isosurface[method];\n return fn([n, n, n], myFun, [\n [-12, -12, -12],\n [12, 12, 12]\n ]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":516,"value":"# surface nets\nPut this \"optimized\" (to be validated) implementation of surface nets in this code or somewhere else","pinned":false,"hidden":false,"mode":"md"},{"id":511,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":444,"value":"vtk = import(\"https://cdn.skypack.dev/vtk.js?min\").then(() => window.vtk)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}