javascript - 任意方向切片 3D 数组以生成纹理

标签 javascript textures webgl texture2d slice

我正在尝试根据给定法线和原点的 3D 数组生成 2D 纹理。

我的问题是我无法找出正确的分辨率来确保我不会忘记纹理中的任何像素。

步骤:

  1. 获取 3D 数组与平面的交集
  2. 将交点坐标移动到二维空间
  3. 迭代 2D 空间中的交集以获取像素值

我的方法的问题是我无法找出在 2D 空间中迭代的正确间距/步长。如果步长太大,我可能会错过一些像素,如果步长太小,则会降低性能。

我的方法有意义吗?

任何帮助将不胜感激。 最好的

==编辑

通常,3D 数组为 256x256x256,数组的每个元素都是尺寸为 spaceX、spacingY、spacingZ 的 3D 体素。

enter image description here

在某些时候,我想使用 3D 纹理直接在 WebGL 中重新切片我的体积,但首先我试图找出 JavaScript 中的逻辑。

如果您查看那里的演示:http://lessons.goxtk.com/17/ ,你应该看到这个问题。理想情况下,2D 切片应始终清晰,但有时,图像上会出现一些伪影,因为由于重新切片不正确,纹理丢失了一些体素。

问题是我想在任何方向上重新切片该体积(不仅与 X/Y/Z 轴对齐)。这意味着我们不仅从相交平面中提取正方形,还提取三 Angular 形。我想生成一个包含所有信息的漂亮纹理。

我希望能够正确提取如下纹理。

enter image description here

使用我当前的(不正确的)方法,我尝试猜测最小重新切片平面间距是多少,并迭代它以生成纹理。但我找不到正确的间距。因此,用我猜测的间距迭代平面,我错过了很多信息。

enter image description here

我当前的方法似乎不正确,欢迎任何有关如何实现它的建议!

最佳

最佳答案

整个方法并非不正确。正确的方法是对于屏幕上的每个像素,将其映射到平面的世界坐标,然后将其映射到 IJK 坐标以找到正确的颜色。

像素 -> 平面坐标 -> IJK 坐标 -> 像素的颜色!

关于javascript - 任意方向切片 3D 数组以生成纹理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28023867/

相关文章:

javascript - IE9以下 'transition'有什么好办法替换掉吗?

javascript - 仅在 iOS 中返回透明图像的 webgl Canvas 的 toDataURL()

three.js - 在 THREE.js 中检索顶点数据

three.js - 如何禁用three.js以以2的幂调整图像大小?

c - 如何在 openGL 中加载和填充带有纹理图像的立方体

canvas - 根据浏览器窗口大小调整视口(viewport)/ Canvas 大小

javascript - 清除 WebGL Canvas ,Three.JS

javascript - 基本 jquery slider 的自动播放功能?

javascript - 如何使用 Ionic Cordova EmailComposer 发送附件数据

javascript - PHP变量存储不同的值?