I want to create a group of BufferGeometries, which is rendered with the MeshStandardMaterial;
How to make the geomeries can play some rotation animations in vertex shader?
I think you’ll need to clarify further what you’re trying to do… if you have multiple geometries, couldn’t you create a mesh for each one and rotate it using the usual mesh.rotation.* methods? If not, what are you doing that requires a custom vertex shader?
Thanks for your reply;
My pages will be run on the android phone;
after I finished the animation with rotation functions, I found the phone device was staring to hot;
so I thought maybe I can try it with the vertex shader for device power saving;
The vertex shader would be useful if you need to move or rotate each vertex of each geometry separately, but for rotating the entire object the same way, using mesh.rotation will be just as performant – three.js applies it on the shader anyway. The exception to that would be if there are lots of objects (hundreds or thousands) in which case you might want to merge them all and do things using THREE.InstancedMesh or more advanced techniques.
If you want to describe the scene or share a demo we may be able to point you in the right direction on the performance problem. How many geometries and materials do you have? Are they models, or simple shapes? Do you know how many draw calls are used? There are some performance tips here that may be helpful, under the performance section: https://discoverthreejs.com/tips-and-tricks/.
Here’s a tutorial on modifying three.js materials.
There’s also one example in the repo that just copies all the GLSL, but i think its a poor way of doing it.
I had read this topic, I know it customs the shader by change the shader source; but the shader source of the ShaderLib is too complicated for me, Mybe I will study and custom the shader source in the future and now I want to find a esayer way to do this;
Thank you very much;
If you want
I think you have to modify the vertex shader, which means custom the shader souce. If you just need rotation, I think it would not consume too much power to change Object3D's rotation. Be sure you should not rotate BufferGeometry often. As the doc said:
.rotateY ( radians : Float ) : BufferGeometry
Rotate the geometry about the Y axis. This is typically done as a one time operation, and not during a loop. Use Object3D.rotation for typical real-time mesh rotation.
https://codepen.io/nafeng-001/pen/eYYzwbW?editors=0010
I created 900 boxes, the performance is not very well;
Yeah, in that case your performance is probably limited by the number of meshes. That means a lot of draw calls (or separate instructions for the GPU). If some or all of those meshes are the same you could reuse them with the new THREE.InstancedMesh helper: https://threejs.org/examples/?q=instanc#webgl_instancing_suzanne. This lets you draw the same number of meshes, but all of the instructions to the GPU are batched together. But it does require that the batched meshes are the same, and have the same material (you could customize the material per-instance too, but that’s more advanced).
3 Likes
Ok, that looks great; Thank you very much;