在3D模型上绘制原始2D形状?

时间:2015-10-22 20:59:12

标签: javascript three.js

据我所知,它被称为投影纹理映射。是否有任何库方法可以将原始2D形状(主要是线条)投影到纹理?

这三个example看起来接近我需要的东西。我尝试用

替换贴花纹理(decalMaterial)
THREE.LineBasicMaterial

但我得到的是方形而不是线条。

1 个答案:

答案 0 :(得分:0)

可以在3D纹理上绘制线条。但是你想要你的模特还是只是贴花?还有其他方法可以更好地贴上贴花,但我假设您想要在贴图上绘画。我在Unity中完成了它,但没有使用WebGL,也不熟悉WebGL的局限性。这是一个让你在3D模型上绘画的程序,比如在Substance Painter,ZBrush等中。我建议在运行时以非破坏性的方式做这个,所以这样做到一个单独的渲染纹理然后只组合2个纹理用于在最终模型中渲染。

要做到这一点,您需要将模型渲染到纹理空间中。所以在你的顶点着色器中输出模型的uv作为你的位置。

最近写了很多hlsl和Cg,所以glsl超级生锈。把它当作伪装来处理。

//Vertex Shader
in vec4 position;
in vec2 uv;

out vec4 fworldPos;
out vec2 fuv;
uniform mat4 transform;

void main()
{
   //We use the uv position of the model so we can draw into
   //its texture space.
   gl_Position = vec4(uv.x*2.0-1.0,uv.y*2.0-1.0,0.0,1.0);
   //Give the fragment shader the uv
   fuv = uv;
   //We will need to do per pixel collision detection with
   //the line or object so we need the world position.
   fworldPos = transform*position
}

然后,您需要在像素着色器中使用画笔进行碰撞检测,并查看画笔是否包含该世界位置。虽然这是你想在上面画画的。项目我做了我们在模型上使用了光线投射,因此刷子将沿着表面进行并轻松完成上述操作。这将给你一个非常粗糙的画笔,你需要添加很多参数来调整画笔看起来像衰减强度,衰减半径等。基本上你在其他绘画3D软件中看到的所有参数。< / p>

你可以用飞机,盒子,球体,线条等做到这一点。只需要测试画笔中是否包含世界位置。不过,不同类型的画笔需要不同的着色器。