使用three.js在3D模型之间转换顶点

时间:2017-06-08 18:39:28

标签: three.js glsl webgl shader buffer-geometry

我正在尝试实现多边形吹制和重组效果,类似于:

在这两个示例中,您可以看到它们如何将顶点从一个3d模型变形/过渡到另一个模型,从而产生非常酷的效果。我有类似的工作,但我无法解决他们如何使用速度偏移过渡顶点(请参阅第一个链接,看看粒子是如何简单地映射和缓解新的位置,而是用一些角度偏移来做):

enter image description here

所以,我在Three.js中导入我的两个模型,取一个具有更大顶点数的模型并复制其几何体,同时将第二个模型数据作为属性附加:

class CustomGeometry extends THREE.BufferGeometry {
  constructor (geometry1, geometry2) {
    super()

    let { count } = geometry1.attributes.position

    // this will hold
    let targetArr = new Float32Array(count * 3)
    let morphFactorArr = new Float32Array(count)

    for (let i = 0; i < count; i += 3) {
      targetArr[i + 0] = geometry2.attributes.position.array[i + 0] || 0
      targetArr[i + 1] = geometry2.attributes.position.array[i + 1] || 0
      targetArr[i + 2] = geometry2.attributes.position.array[i + 2] || 0

      let rand = Math.random()
      morphFactorArr[i + 0] = rand
      morphFactorArr[i + 1] = rand
      morphFactorArr[i + 2] = rand
    }
    this.addAttribute('a_target',      new THREE.BufferAttribute(targetArr, 3))
    this.addAttribute('a_morphFactor', new THREE.BufferAttribute(morphFactorArr, 1))
    this.addAttribute('position', geometry1.attributes.position)
  }
}

然后在我的着色器中,我可以简单地在它们之间转换:

vec3 new_position = mix(position, a_targetPosition, a_morphFactor);

这很有效,但真的很枯燥乏味。顶点只是从一个模型映射到另一个模型,没有任何偏移,没有重力或任何你想投入混合的东西。

此外,由于如果存在顶点数不匹配,我将0附加到位置,未使用的位置只会缩放到vec4(0.0,0.0,0.0,1.0),这又会导致枯燥乏味的效果(这里在兔子和大象模型之间变形)

(注意未使用的兔子顶点如何简单地缩小到0)

morphing between a rabbit and elephant model

如何处理这样的问题?

此外,在League of Legends link中,他们如何设法

  1. 在模型在屏幕上处于活动状态时,将顶点内部动画设置为

  2. 在将粒子映射到下一个模型时(点击箭头和过渡时)对粒子应用不同的速度和重力?

  3. 是通过传递布尔属性吗?他们正在改变targetPositions数组吗?任何帮助都非常感谢

1 个答案:

答案 0 :(得分:3)

这很有效,但真的很无聊和无聊。顶点只是从一个模型映射到另一个模型,没有任何偏移,没有重力或任何你想投入混合的东西。

因此,您可以应用您可以想象和编码的任何效果。 这不是您问题的确切答案,但这是您可以使用着色器执行的最简单的激励示例。 Spoiler:这个答案的最后是一个工作示例的链接。

让我们改变这个

Cube

进入这个

Sphere

在过渡期间有趣的蜂拥而至

Swarm

我们会将THREE.BoxBufferGeometry()与一些自定义属性结合使用:

var sideLenght = 10;
var sideDivision = 50;
var cubeGeom = new THREE.BoxBufferGeometry(sideLenght, sideLenght, sideLenght, sideDivision, sideDivision, sideDivision);
var attrPhi = new Float32Array( cubeGeom.attributes.position.count );
var attrTheta = new Float32Array( cubeGeom.attributes.position.count );
var attrSpeed = new Float32Array( cubeGeom.attributes.position.count );
var attrAmplitude = new Float32Array( cubeGeom.attributes.position.count );
var attrFrequency = new Float32Array( cubeGeom.attributes.position.count );
for (var attr = 0; attr < cubeGeom.attributes.position.count; attr++){
    attrPhi[attr] = Math.random() * Math.PI * 2;
  attrTheta[attr] = Math.random() * Math.PI * 2;
  attrSpeed[attr] = THREE.Math.randFloatSpread(6);  
  attrAmplitude[attr] = Math.random() * 5;
  attrFrequency[attr] = Math.random() * 5;
}
cubeGeom.addAttribute( 'phi', new THREE.BufferAttribute( attrPhi, 1 ) );
cubeGeom.addAttribute( 'theta', new THREE.BufferAttribute( attrTheta, 1 ) );
cubeGeom.addAttribute( 'speed', new THREE.BufferAttribute( attrSpeed, 1 ) );
cubeGeom.addAttribute( 'amplitude', new THREE.BufferAttribute( attrAmplitude, 1 ) );
cubeGeom.addAttribute( 'frequency', new THREE.BufferAttribute( attrFrequency, 1 ) );

THREE.ShaderMaterial()

var vertexShader = [
"uniform float interpolation;",
"uniform float radius;",
"uniform float time;",
"attribute float phi;",
"attribute float theta;",
"attribute float speed;",
"attribute float amplitude;",
"attribute float frequency;",

"vec3 rtp2xyz(){ // the magic is here",
" float tmpTheta = theta + time * speed;",
" float tmpPhi = phi + time * speed;",
" float r = sin(time * frequency) * amplitude * sin(interpolation * 3.1415926);",
" float x = sin(tmpTheta) * cos(tmpPhi) * r;",
" float y = sin(tmpTheta) * sin(tmpPhi) * r;",
" float z = cos(tmpPhi) * r;",
" return vec3(x, y, z);",
"}",

"void main(){",
" vec3 newPosition = mix(position, normalize(position) * radius, interpolation);",
" newPosition += rtp2xyz();",
"   vec4 mvPosition = modelViewMatrix * vec4( newPosition, 1.0 );",
"   gl_PointSize = 1. * ( 1. / length( mvPosition.xyz ) );",
"   gl_Position = projectionMatrix * mvPosition;",
"}"
].join("\n");

var fragmentShader = [
"uniform vec3 color;",
"void main(){",
"   gl_FragColor = vec4( color, 1.0 );",
"}"
].join("\n");

var uniforms = {
    interpolation: { value: slider.value},
  radius: { value: 7.5},
  color: { value: new THREE.Color(0x00ff00)},
  time: { value: 0 }
}

var shaderMat = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: vertexShader,
  fragmentShader: fragmentShader,
  //wireframe: true //just in case, if you want to use THREE.Mesh() instead of THREE.Points()
});

正如您所看到的,所有魔法都发生在顶点着色器及其rtp2xyz()函数中。

最后,动画功能的代码:

var clock = new THREE.Clock();
var timeVal = 0;

render();
function render(){
    timeVal += clock.getDelta();
    requestAnimationFrame(render);
  uniforms.time.value = timeVal;
  uniforms.interpolation.value = slider.value;
  renderer.render(scene, camera);
}

哦,是的,我们的页面中有一个滑块控件:

<input id="slider" type="range" min="0" max="1" step="0.01" value="0.5" style="position:absolute;width:300px;">

这是一个片段

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(10, 10, 20);
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var vertexShader = [
"uniform float interpolation;",
"uniform float radius;",
"uniform float time;",
"attribute float phi;",
"attribute float theta;",
"attribute float speed;",
"attribute float amplitude;",
"attribute float frequency;",

"vec3 rtp2xyz(){ // the magic is here",
" float tmpTheta = theta + time * speed;",
" float tmpPhi = phi + time * speed;",
" float r = sin(time * frequency) * amplitude * sin(interpolation * 3.1415926);",
" float x = sin(tmpTheta) * cos(tmpPhi) * r;",
" float y = sin(tmpTheta) * sin(tmpPhi) * r;",
" float z = cos(tmpPhi) * r;",
" return vec3(x, y, z);",
"}",

"void main(){",
" vec3 newPosition = mix(position, normalize(position) * radius, interpolation);",
" newPosition += rtp2xyz();",
"	vec4 mvPosition = modelViewMatrix * vec4( newPosition, 1.0 );",
"	gl_PointSize = 1. * ( 1. / length( mvPosition.xyz ) );",
"	gl_Position = projectionMatrix * mvPosition;",
"}"
].join("\n");

var fragmentShader = [
"uniform vec3 color;",
"void main(){",
"	gl_FragColor = vec4( color, 1.0 );",
"}"
].join("\n");

var uniforms = {
	interpolation: { value: slider.value},
  radius: { value: 7.5},
  color: { value: new THREE.Color(0x00ff00)},
  time: { value: 0 }
}

var sideLenght = 10;
var sideDivision = 50;
var cubeGeom = new THREE.BoxBufferGeometry(sideLenght, sideLenght, sideLenght, sideDivision, sideDivision, sideDivision);
var attrPhi = new Float32Array( cubeGeom.attributes.position.count );
var attrTheta = new Float32Array( cubeGeom.attributes.position.count );
var attrSpeed = new Float32Array( cubeGeom.attributes.position.count );
var attrAmplitude = new Float32Array( cubeGeom.attributes.position.count );
var attrFrequency = new Float32Array( cubeGeom.attributes.position.count );
for (var attr = 0; attr < cubeGeom.attributes.position.count; attr++){
	attrPhi[attr] = Math.random() * Math.PI * 2;
  attrTheta[attr] = Math.random() * Math.PI * 2;
  attrSpeed[attr] = THREE.Math.randFloatSpread(6);	
  attrAmplitude[attr] = Math.random() * 5;
  attrFrequency[attr] = Math.random() * 5;
}
cubeGeom.addAttribute( 'phi', new THREE.BufferAttribute( attrPhi, 1 ) );
cubeGeom.addAttribute( 'theta', new THREE.BufferAttribute( attrTheta, 1 ) );
cubeGeom.addAttribute( 'speed', new THREE.BufferAttribute( attrSpeed, 1 ) );
cubeGeom.addAttribute( 'amplitude', new THREE.BufferAttribute( attrAmplitude, 1 ) );
cubeGeom.addAttribute( 'frequency', new THREE.BufferAttribute( attrFrequency, 1 ) );

var shaderMat = new THREE.ShaderMaterial({
	uniforms: uniforms,
	vertexShader: vertexShader,
  fragmentShader: fragmentShader,
  //wireframe: true
});
var points = new THREE.Points(cubeGeom, shaderMat);
scene.add(points);

var clock = new THREE.Clock();
var timeVal = 0;

render();
function render(){
	timeVal += clock.getDelta();
	requestAnimationFrame(render);
  uniforms.time.value = timeVal;
  uniforms.interpolation.value = slider.value;
  renderer.render(scene, camera);
}
body{
  margin: 0;
}
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<input id="slider" type="range" min="0" max="1" step="0.01" value="0.5" style="position:absolute;width:300px;">