A-Frame 中带有 Three.ShaderMaterial 的自定义材质答案

【问题标题】：Custom Materials With Three.ShaderMaterial in A-FrameA-Frame 中带有 Three.ShaderMaterial 的自定义材质
【发布时间】：2017-03-30 05:54:49
【问题描述】：

我正在尝试使用 THREE.ShaderMaterial 在 A-Frame 中制作 custom material。显然，如果 A-Frame 不是通过 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 );
}
`
});

【问题讨论】：

尝试传入vertexShader/fragmentShader 内联还是通过单独的变量？也许这将有助于告诉 A-Frame 使用您创建的ShaderMaterial。
也不确定wireframe 与自定义着色器的组合效果如何。

标签： three.js aframe

【解决方案1】：

您可以将线框着色器构建到您的自定义着色器中，或者尝试使用不同材质对同一对象进行两次渲染，然后将它们叠加在一起？两者都可以，渲染两次意味着更多的绘制调用，但如果你不太关心帧速率，它可能比结合两个着色器更容易，这取决于你对着色器代码的了解。

【讨论】：