Javascript 使用实例，我无法更改单个子几何体的透明度/不透明度_Javascript_Three.js_Aframe_Buffer Geometry_Geometry Instancing

Javascript 使用实例，我无法更改单个子几何体的透明度/不透明度

javascript three.js aframe

Javascript 使用实例，我无法更改单个子几何体的透明度/不透明度,javascript,three.js,aframe,buffer-geometry,geometry-instancing,Javascript,Three.js,Aframe,Buffer Geometry,Geometry Instancing,我有一个由1000个球体实例组成的简单模型。我试图使用实例来减少绘制调用的数量。但是，我无法更改单个子几何体的透明度/不透明度我已经尝试过以下方法：我可以使用 material.fragmentShader = "varying vec3 vColor;void main() { gl_FragColor = vec4( vColor, 0.2 );}"; 但是，这会将每个球体的不透明度更改为0.2 html文件如下所示： <!DOCTYPE html> <html&

我有一个由1000个球体实例组成的简单模型。我试图使用实例来减少绘制调用的数量。但是，我无法更改单个子几何体的透明度/不透明度

我已经尝试过以下方法：

我可以使用

material.fragmentShader = "varying vec3 vColor;void main() {  gl_FragColor = vec4( vColor, 0.2 );}";

但是，这会将每个球体的不透明度更改为0.2

html文件如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>A-Frame Instancing component</title>
    <meta name="description" content="A-Frame Instancing component">
    <script>
    /*
    var WebVRConfig = {
        FORCE_ENABLE_VR: true,
        BUFFER_SCALE: 1.0
    };
    */
    </script>
    <script src="https://cdn.rawgit.com/aframevr/aframe/v0.4.0/dist/aframe-master.min.js"></script>
    <script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v3.2.0/dist/aframe-extras.min.js"></script>
    <script type="text/javascript" src="build/aframe-instancing.js"></script>
  </head>
  <body>
    <a-scene stats>
      <a-assets>
        <img id="sky" src="https://cdn.rawgit.com/aframevr/aframe/master/examples/primitives/models/peach-gradient.jpg">
      </a-assets>
      <a-entity instancing="count:100"></a-entity>
      <a-sky src="#sky"></a-sky>
      <a-entity light="type:directional;color:#FFFFFF" position="-1 1 1"></a-entity>
    </a-scene>
  </body>
</html>

谁能告诉我，如何改变只有一个球体的不透明度？提前谢谢你

另外，假设我尝试复制多个框。其中之一是：

    <a-box position="19.0 1.5 23.0"
           width="32.0"
           height="1.0"
           depth="40.0"
           color="#969696"
           shader="flat"
           flat-shading="true">
    </a-box>

我将在translateArray和vectorArray中填写哪些值？

提前多谢

您的颜色只是

RGB

值，而不是

RGBA

。更新

color

属性以支持4个值，并将相关的

vec3

引用更改为使用

vec4

。向量中的最后一个值将是您的

alpha

（透明度）值

看起来您已经知道如何将值从

顶点着色器

发送到

片段着色器

，因此我将不在这里详细介绍。但是在

片段着色器

中，可以直接使用颜色，因为

gl\u FragColor

希望设置为

vec4

进一步澄清：

创建

InstancedBufferAttribute

时，每个实例创建一个属性。因此，您的

color

属性当前仅为每个实例携带

RGB

值

硬编码

或

0.2

在

位置（即

gl_FragColor=vec4（vColor，1）；

），可以将其普遍应用于所有实例。因此，您需要基于每个实例定义

alpha

值，最简单的方法是通过已经创建并实例化的

color

属性

//geometry.addAttribute('color', new THREE.InstancedBufferAttribute(colorArray, 3, 1)
geometry.addAttribute('color', new THREE.InstancedBufferAttribute(colorArray, 4, 1)

上面的代码为alpha值留出了空间，您应该为每个球体提供alpha值。您的

colorArray

将包含类似

[R，G，B，A，R，G，B，A，…]的数据
然后，在着色器中
//顶点着色器
// ...
属性向量4颜色；
可变vec4颜色；
// ...
void main（）{
// ...
vColor=颜色；
// ...
}

//片段着色器
// ...
可变vec4颜色；
// ...
void main（）{
// ...
gl_FragColor=vColor；
}

现在，为每个球体实例提供的alpha值将仅用于该实例。例如，如果希望索引1处的球体是唯一的透明球体，则colorArray
缓冲区应如下所示：
colorArray = [
  1.0, 1.0, 1.0, 1.0,
  1.0, 1.0, 1.0, 0.5,
  1.0, 1.0, 1.0, 1.0,
  // ...
];`

重要注意事项
此实现不会对实例进行深度排序，因此混合将取决于渲染顺序。您可以在以下问题中了解更多信息：
我知道第四项是alpha值。我的问题是，是否可以只改变一个领域的透明度，而不改变其他领域的透明度？缓冲区几何体不允许这种情况，是否可以使用实例？谢谢你的回复。@ShubhamKumar我已经添加了更多信息来澄清这一点。希望有帮助。谢谢你的回复！这解释了很多：）我在最后的问题中增加了一点疑问。请你也澄清一下好吗？提前多谢@ShubhamKumar我猜那是一架？关于那件事我真的一无所知。此外，这似乎是一个单独的问题，值得单独提出一个问题。一定要同时标记一个框架。：）
colorArray = [
  1.0, 1.0, 1.0, 1.0,
  1.0, 1.0, 1.0, 0.5,
  1.0, 1.0, 1.0, 1.0,
  // ...
];`