Question

我尝试使用THREE.ShaderMaterial在A-Frame中制作custom material。显然，如果着色器没有通过registerShader API，它不会编译着色器。线框属性生效但着色器不起作用。特别是，我希望除了我的着色器之外还有线框渲染，它只是根据它们与特定点（pos）的距离来改变顶点的颜色。是否有任何方法可以更改此代码以强制A-Frame编译着色器或使用着色器API并仍然实现THREE.ShaderMaterial的线框和其他属性。

AFRAME.registerShader('shellmaterial', {

schema: {
    color: {default: {value: new THREE.Color(255, 255, 255)}},
    pos: {default: {value: {x: 132.89, y: 50.64, z: -106.52}}}
},

init: function (data) {
    let uniformsObj = {color: data.color, pos: data.pos};

    this.material = new THREE.ShaderMaterial({
        wireframe: true,
        shading: THREE.SmoothShading,
        uniforms: uniformsObj,
        vertexShader: this.vertexShader,
        fragmentShader: this.fragmentShader
    });
},


update: function (data) {
    let uniformsObj = {color: data.color, pos: data.pos};

    this.material = new THREE.ShaderMaterial({
        wireframe: true,
        shading: THREE.SmoothShading,
        uniforms: uniformsObj,
        vertexShader: this.vertexShader,
        fragmentShader: this.fragmentShader
    });
},

vertexShader:

 `
   uniform vec3 color;
   uniform vec3 pos;
   varying vec3 vColor;
   varying float dist;

   void main(){
        dist = distance(position,pos);        
            if (dist<500.0){
                vColor = vec3(1.0,dist/500.0,dist/500.0);
            }
            else{
                vColor = vec3(1.0);
            }
        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );}
    `,

fragmentShader: `
uniform vec3 color;
varying vec3 vColor;

void main(){
  gl_FragColor = vec4( color*vColor, 1.0 );
}
`
});

Answer 1

您可以将线框着色器构建到自定义着色器中，或者尝试使用不同材质对同一对象进行两次渲染，并将它们组合在一起？两者都应该工作，渲染两次意味着更多的绘制调用，但如果你不太关心帧速率，那么根据你对着色器代码的了解，它可能比组合两个着色器更容易。

定制材料与A-Frame中的Three.ShaderMaterial

1 个答案: