将图像转换为 SceneKit 节点
Convert an image to a SceneKit Node
我有一张位图图像:
(但是这应该适用于任意图像)
我想拍摄我的图像并将其制作成 3D SCNNode。我已经用这段代码完成了那么多。这会获取图像中的每个像素并创建一个具有 SCNBox 几何形状的 SCNNode。
static inline SCNNode* NodeFromSprite(const UIImage* image) {
SCNNode *node = [SCNNode node];
CFDataRef pixelData = CGDataProviderCopyData(CGImageGetDataProvider(image.CGImage));
const UInt8* data = CFDataGetBytePtr(pixelData);
for (int x = 0; x < image.size.width; x++)
{
for (int y = 0; y < image.size.height; y++)
{
int pixelInfo = ((image.size.width * y) + x) * 4;
UInt8 alpha = data[pixelInfo + 3];
if (alpha > 3)
{
UInt8 red = data[pixelInfo];
UInt8 green = data[pixelInfo + 1];
UInt8 blue = data[pixelInfo + 2];
UIColor *color = [UIColor colorWithRed:red/255.0f green:green/255.0f blue:blue/255.0f alpha:alpha/255.0f];
SCNNode *pixel = [SCNNode node];
pixel.geometry = [SCNBox boxWithWidth:1.001 height:1.001 length:1.001 chamferRadius:0];
pixel.geometry.firstMaterial.diffuse.contents = color;
pixel.position = SCNVector3Make(x - image.size.width / 2.0,
y - image.size.height / 2.0,
0);
[node addChildNode:pixel];
}
}
}
CFRelease(pixelData);
node = [node flattenedClone];
//The image is upside down and I have no idea why.
node.rotation = SCNVector4Make(1, 0, 0, M_PI);
return node;
}
但问题是我正在做的事情占用了太多内存!
我正在尝试找到一种使用更少内存的方法。
所有代码和资源都可以在以下位置找到:
https://github.com/KonradWright/KNodeFromSprite
现在你把每个像素画成某种颜色的SCNBox,也就是说:
- 每箱一次 GL 抽奖
- 在相邻框之间绘制不必要的两个不可见面
- 在可以绘制一个1x1xN的盒子的情况下,连续绘制N个相同的1x1x1的盒子
似乎是常见的类似 Minecraft 的优化问题:
- 把你的图像当做3维数组(这里的depth就是想要的图像挤压深度),每个元素代表某种颜色的立方体素。
- 使用greedy meshing algorithm (demo) and custom SCNGeometry为SceneKit节点创建网格。
跳过相邻立方体面的网格划分算法的伪代码(更简单,但不如贪婪网格划分有效):
#define SIZE_X = 16; // image width
#define SIZE_Y = 16; // image height
// pixel data, 0 = transparent pixel
int data[SIZE_X][SIZE_Y];
// check if there is non-transparent neighbour at x, y
BOOL has_neighbour(x, y) {
if (x < 0 || x >= SIZE_X || y < 0 || y >= SIZE_Y || data[x][y] == 0)
return NO; // out of dimensions or transparent
else
return YES;
}
void add_face(x, y orientation, color) {
// add face at (x, y) with specified color and orientation = TOP, BOTTOM, LEFT, RIGHT, FRONT, BACK
// can be (easier and slower) implemented with SCNPlane's: https://developer.apple.com/library/mac/documentation/SceneKit/Reference/SCNPlane_Class/index.html#//apple_ref/doc/uid/TP40012010-CLSCHSCNPlane-SW8
// or (harder and faster) using Custom Geometry: https://github.com/d-ronnqvist/blogpost-codesample-CustomGeometry/blob/master/CustomGeometry/CustomGeometryView.m#L84
}
for (x = 0; x < SIZE_X; x++) {
for (y = 0; y < SIZE_Y; y++) {
int color = data[x][y];
// skip current pixel is transparent
if (color == 0)
continue;
// check neighbour at top
if (! has_neighbour(x, y + 1))
add_face(x,y, TOP, );
// check neighbour at bottom
if (! has_neighbour(x, y - 1))
add_face(x,y, BOTTOM);
// check neighbour at bottom
if (! has_neighbour(x - 1, y))
add_face(x,y, LEFT);
// check neighbour at bottom
if (! has_neighbour(x, y - 1))
add_face(x,y, RIGHT);
// since array is 2D, front and back faces is always visible for non-transparent pixels
add_face(x,y, FRONT);
add_face(x,y, BACK);
}
}
很大程度上取决于输入图像。如果它不大并且没有多种颜色,我会选择 SCNNode
为可见面添加 SCNPlane
,然后 flattenedClone()
结果。
一种类似于 Ef Dot 提出的方法:
- 为了尽可能减少绘图调用的数量,您需要尽可能减少 material 的数量。在这里,每种颜色需要一个
SCNMaterial
。
- 为了尽可能减少绘制调用的数量,请确保没有两个几何元素 (
SCNGeometryElement
) 使用相同的 material。换句话说,每个 material(颜色)使用一个几何元素。
因此您必须构建一个 SCNGeometry
,其中包含 N
几何元素和 N
materials,其中 N
是不同颜色的数量在你的形象中。
- 对于图像中的每种颜色,从该颜色的所有像素构建一个多边形(或一组不相交的多边形)
- 对每个多边形(或多边形组)进行三角剖分并使用该三角剖分构建几何元素。
- 从几何元素构建几何。
如果您对自己对多边形进行三角测量感到不自在,可以利用 SCNShape
。
- 为每个多边形(或多边形组)创建一个
UIBezierPath
并用它构建一个 SCNShape
。
- 将形状的所有几何源合并到一个源中,并重复使用几何元素来创建自定义
SCNGeometry
请注意,如果您使用 SCNShape
的集合来构建几何体,某些顶点将被复制。只需很少的努力,您就可以确保最终源中没有两个顶点具有相同的位置。相应地更新几何元素中的索引。
我还可以指导您访问 Nick Lockwood 的这个出色的 GitHub 回购协议:
https://github.com/nicklockwood/FPSControls
它将向您展示如何将网格生成为平面(而不是立方体),这是使用 "neighboring" 检查快速实现简单场景所需的方法。
如果你需要大型复杂场景,那么我建议你使用贪心网格算法使用 Ef Dot 提出的解决方案。
我有一张位图图像:
(但是这应该适用于任意图像)
我想拍摄我的图像并将其制作成 3D SCNNode。我已经用这段代码完成了那么多。这会获取图像中的每个像素并创建一个具有 SCNBox 几何形状的 SCNNode。
static inline SCNNode* NodeFromSprite(const UIImage* image) {
SCNNode *node = [SCNNode node];
CFDataRef pixelData = CGDataProviderCopyData(CGImageGetDataProvider(image.CGImage));
const UInt8* data = CFDataGetBytePtr(pixelData);
for (int x = 0; x < image.size.width; x++)
{
for (int y = 0; y < image.size.height; y++)
{
int pixelInfo = ((image.size.width * y) + x) * 4;
UInt8 alpha = data[pixelInfo + 3];
if (alpha > 3)
{
UInt8 red = data[pixelInfo];
UInt8 green = data[pixelInfo + 1];
UInt8 blue = data[pixelInfo + 2];
UIColor *color = [UIColor colorWithRed:red/255.0f green:green/255.0f blue:blue/255.0f alpha:alpha/255.0f];
SCNNode *pixel = [SCNNode node];
pixel.geometry = [SCNBox boxWithWidth:1.001 height:1.001 length:1.001 chamferRadius:0];
pixel.geometry.firstMaterial.diffuse.contents = color;
pixel.position = SCNVector3Make(x - image.size.width / 2.0,
y - image.size.height / 2.0,
0);
[node addChildNode:pixel];
}
}
}
CFRelease(pixelData);
node = [node flattenedClone];
//The image is upside down and I have no idea why.
node.rotation = SCNVector4Make(1, 0, 0, M_PI);
return node;
}
但问题是我正在做的事情占用了太多内存!
我正在尝试找到一种使用更少内存的方法。
所有代码和资源都可以在以下位置找到: https://github.com/KonradWright/KNodeFromSprite
现在你把每个像素画成某种颜色的SCNBox,也就是说:
- 每箱一次 GL 抽奖
- 在相邻框之间绘制不必要的两个不可见面
- 在可以绘制一个1x1xN的盒子的情况下,连续绘制N个相同的1x1x1的盒子
似乎是常见的类似 Minecraft 的优化问题:
- 把你的图像当做3维数组(这里的depth就是想要的图像挤压深度),每个元素代表某种颜色的立方体素。
- 使用greedy meshing algorithm (demo) and custom SCNGeometry为SceneKit节点创建网格。
跳过相邻立方体面的网格划分算法的伪代码(更简单,但不如贪婪网格划分有效):
#define SIZE_X = 16; // image width
#define SIZE_Y = 16; // image height
// pixel data, 0 = transparent pixel
int data[SIZE_X][SIZE_Y];
// check if there is non-transparent neighbour at x, y
BOOL has_neighbour(x, y) {
if (x < 0 || x >= SIZE_X || y < 0 || y >= SIZE_Y || data[x][y] == 0)
return NO; // out of dimensions or transparent
else
return YES;
}
void add_face(x, y orientation, color) {
// add face at (x, y) with specified color and orientation = TOP, BOTTOM, LEFT, RIGHT, FRONT, BACK
// can be (easier and slower) implemented with SCNPlane's: https://developer.apple.com/library/mac/documentation/SceneKit/Reference/SCNPlane_Class/index.html#//apple_ref/doc/uid/TP40012010-CLSCHSCNPlane-SW8
// or (harder and faster) using Custom Geometry: https://github.com/d-ronnqvist/blogpost-codesample-CustomGeometry/blob/master/CustomGeometry/CustomGeometryView.m#L84
}
for (x = 0; x < SIZE_X; x++) {
for (y = 0; y < SIZE_Y; y++) {
int color = data[x][y];
// skip current pixel is transparent
if (color == 0)
continue;
// check neighbour at top
if (! has_neighbour(x, y + 1))
add_face(x,y, TOP, );
// check neighbour at bottom
if (! has_neighbour(x, y - 1))
add_face(x,y, BOTTOM);
// check neighbour at bottom
if (! has_neighbour(x - 1, y))
add_face(x,y, LEFT);
// check neighbour at bottom
if (! has_neighbour(x, y - 1))
add_face(x,y, RIGHT);
// since array is 2D, front and back faces is always visible for non-transparent pixels
add_face(x,y, FRONT);
add_face(x,y, BACK);
}
}
很大程度上取决于输入图像。如果它不大并且没有多种颜色,我会选择 SCNNode
为可见面添加 SCNPlane
,然后 flattenedClone()
结果。
一种类似于 Ef Dot 提出的方法:
- 为了尽可能减少绘图调用的数量,您需要尽可能减少 material 的数量。在这里,每种颜色需要一个
SCNMaterial
。 - 为了尽可能减少绘制调用的数量,请确保没有两个几何元素 (
SCNGeometryElement
) 使用相同的 material。换句话说,每个 material(颜色)使用一个几何元素。
因此您必须构建一个 SCNGeometry
,其中包含 N
几何元素和 N
materials,其中 N
是不同颜色的数量在你的形象中。
- 对于图像中的每种颜色,从该颜色的所有像素构建一个多边形(或一组不相交的多边形)
- 对每个多边形(或多边形组)进行三角剖分并使用该三角剖分构建几何元素。
- 从几何元素构建几何。
如果您对自己对多边形进行三角测量感到不自在,可以利用 SCNShape
。
- 为每个多边形(或多边形组)创建一个
UIBezierPath
并用它构建一个SCNShape
。 - 将形状的所有几何源合并到一个源中,并重复使用几何元素来创建自定义
SCNGeometry
请注意,如果您使用 SCNShape
的集合来构建几何体,某些顶点将被复制。只需很少的努力,您就可以确保最终源中没有两个顶点具有相同的位置。相应地更新几何元素中的索引。
我还可以指导您访问 Nick Lockwood 的这个出色的 GitHub 回购协议:
https://github.com/nicklockwood/FPSControls
它将向您展示如何将网格生成为平面(而不是立方体),这是使用 "neighboring" 检查快速实现简单场景所需的方法。
如果你需要大型复杂场景,那么我建议你使用贪心网格算法使用 Ef Dot 提出的解决方案。