THREE.js将子弹添加为精灵并分别旋转

时间:2018-08-04 17:22:36

标签: three.js

我一直在编写游戏,其中所有内容均以3d渲染。虽然子弹是2D精灵。这带来了一个问题。我必须通过旋转材料来旋转子弹精灵。这样一来,每一颗拥有该材料的子弹,而不是我想要转动的单个子弹,就变成了子弹。为每个项目符号创建一个新的sprite克隆也是一种低效的方法。有一个更好的方法吗?预先感谢。

1 个答案:

答案 0 :(得分:1)

旋转精灵本身而不是纹理。

编辑: 如OP所述.. spritematerial控制sprites旋转.y,因此手动设置它不会执行任何操作...

因此,可以使用带有网格基础材料或类似材料的常规平面几何网格来代替Sprite类型,并自己更新矩阵,以使Sprite始终面向相机并朝着其轨迹旋转。 然后,至少您可以在所有实例之间共享材料。

然后,性能瓶颈就变成了调用的数量..(每个精灵1个)..

您可以通过使用单个BufferGeometry并为每个子画面,每个帧计算4个屏幕空间顶点来改进此效果。这将使瓶颈远离drawCalls,并且将受到可在javascript中转换顶点的速度的限制,该速度很慢,但并非世界末日。这也是实施THREE.js粒子系统的数量。

除此之外,下一步是使用自定义顶点着色器进行繁重的顶点计算。您仍在更新每帧的buffergeometry,但不转换顶点,而只是将精灵的位置写入每个顶点4个顶点,然后让顶点着色器确定要转换的4个顶点中的哪个(可能基于UV坐标,或存储在顶点颜色通道之一中,.r用于instace)以及哪个精灵从您的精灵图集(单个纹理/画布,其中所有精灵都放置在网格上)以顶点颜色.g编码进行渲染。

除此之外,下一步是不更新每帧的BufferGeometry,而是将精灵的位置和速度存储在顶点数据中,并且仅将时间偏移量均匀地传递到顶点着色器中,然后再将顶点着色器传递给顶点着色器。可以在更长的时间内处理积分位置。这仅适用于具有确定性行为的精灵,或可从诸如噪声纹理或翘曲纹理之类的纹理数据源派生的行为。诸如烟雾,爆炸等之类的东西。

您可以扩展这些技术以绘制巨大的滚动图块图。我已经使用这些技术制作了2048个十六进制正方形的多层滚动/可缩放十六进制地图(这是一个相当大的地图)(〜4m个三角形)。顶部还有60赫兹的多层精灵。

以下是原始的stemkoski粒子系统供参考: http://stemkoski.github.io/Three.js/Particle-Engine.html

和:

https://stemkoski.github.io/Three.js/ParticleSystem-Dynamic.html