I know that we can load JSON models in WebGL, but I don't know how to animate them if we have a rigged model loaded. Is there any way of doing this without three.js?
我知道我们可以在WebGL中加载JSON模型,但是如果我们加载了一个装配模型,我不知道如何设置它们的动画。没有three.js有没有办法做到这一点?
1 个解决方案
#1
You can animate a rigged model using THREE.js (however you seem to not want to use the built in functionality).
您可以使用THREE.js为装配模型设置动画(但您似乎不想使用内置功能)。
What THREE.js is doing in the background, is passing all the matrix transforms (an array of matrices), and per vertex it passes the bone indexes (up to 4) and bone weights to the vertex shader. In the vertex shader, it's blending between those matrices based on vertex weight and translating the vertex. So in theory you can pass values to the vertex shader to animate things. Or just use THREE.js animation routines.
THREE.js在后台做的是传递所有矩阵变换(矩阵数组),每个顶点它将骨骼索引(最多4个)和骨骼权重传递给顶点着色器。在顶点着色器中,它基于顶点权重和平移顶点在这些矩阵之间进行混合。因此理论上,您可以将值传递给顶点着色器以对事物进行动画处理。或者只使用THREE.js动画例程。
It can use 2 methods to store all this data. One method uses an "image texture" which stores all those matrix and does some fancy footwork to turn the image into matrices in the vertex shader. Another method is just passing uniform matrix array (for newer graphics cards this is preferred method).
它可以使用2种方法来存储所有这些数据。一种方法使用“图像纹理”,其存储所有那些矩阵并且做一些花哨的步法以将图像转换成顶点着色器中的矩阵。另一种方法是通过均匀矩阵阵列(对于较新的图形卡,这是首选方法)。
#1
You can animate a rigged model using THREE.js (however you seem to not want to use the built in functionality).
您可以使用THREE.js为装配模型设置动画(但您似乎不想使用内置功能)。
What THREE.js is doing in the background, is passing all the matrix transforms (an array of matrices), and per vertex it passes the bone indexes (up to 4) and bone weights to the vertex shader. In the vertex shader, it's blending between those matrices based on vertex weight and translating the vertex. So in theory you can pass values to the vertex shader to animate things. Or just use THREE.js animation routines.
THREE.js在后台做的是传递所有矩阵变换(矩阵数组),每个顶点它将骨骼索引(最多4个)和骨骼权重传递给顶点着色器。在顶点着色器中,它基于顶点权重和平移顶点在这些矩阵之间进行混合。因此理论上,您可以将值传递给顶点着色器以对事物进行动画处理。或者只使用THREE.js动画例程。
It can use 2 methods to store all this data. One method uses an "image texture" which stores all those matrix and does some fancy footwork to turn the image into matrices in the vertex shader. Another method is just passing uniform matrix array (for newer graphics cards this is preferred method).
它可以使用2种方法来存储所有这些数据。一种方法使用“图像纹理”,其存储所有那些矩阵并且做一些花哨的步法以将图像转换成顶点着色器中的矩阵。另一种方法是通过均匀矩阵阵列(对于较新的图形卡,这是首选方法)。