Javascript WebGL:使用texture2D（）时设置不透明度

我有一个由Three.js创建的简单WebGL场景，我正在使用自定义着色器。该场景包含一幅图像，我想设置图像的不透明度，但操纵。gl_FragColor的属性并没有起作用

有人知道如何在WebGL中设置图像的不透明度吗？如果其他人能就这个问题提供任何意见，我将不胜感激

html，正文{宽度：100%；高度：100%；背景：000；} 正文{边距：0；溢出：隐藏；} 画布{宽度：100%；高度：100%；} 统一mat4模型视图矩阵； 均匀mat4投影矩阵； 均匀vec3摄像机定位； 属性向量2 uv； 属性向量3位置； 可变vec2 vUv； 真空总管{ vUv=紫外线； gl_位置=投影矩阵*模型视图矩阵*向量4位置，1.0； } 高精度浮点；//设置浮动精度可选 均匀二维纹理；//将纹理标识为统一参数 可变vec2 vUv；//将uv值标识为可变属性 真空总管{ vec4颜色=纹理2dTexture，vUv； gl_FragColor=vec4color[0]，color[1]，color[2]，0.0； } 函数getScene{ var场景=新的三个场景； scene.background=new THREE.Color0xffffff； 返回场景； } 功能获取照相机{ var aspectRatio=window.innerWidth/window.innerHeight； var摄像机=新的3.PerspectiveCamera75，aspectRatio，0.11000； camera.position.set0、1、10； 返回摄像机； } 函数getRenderer{ //使用渲染器创建画布 var renderer=new THREE.WebGLRenderer{antialas:true}； //添加对视网膜显示的支持 renderer.setPixelRatiowindow.devicePixelRatio； //指定画布的大小 renderer.setSizewindow.innerWidth，window.innerHeight； //将画布添加到DOM中 document.body.appendChildrender.doElement； 返回渲染器； } 函数getControlscamera，渲染器{ var controls=new THREE.TrackballControlscamera，renderer.domElement； controls.zoomSpeed=0.4； 控制点速度=0.4； 返回控制； } 函数loadImage{ var geometry=新的三点缓冲几何体； /* 现在我们需要将一些顶点推入该几何体，以确定几何体应该覆盖的坐标 */ //确定图像大小 var imageSize={宽度：10，高度：7.5}； //确定图像应放置的x、y、z坐标 var-coords={x:-5，y:-3.75，z:0}； //使用 //以下顺序：左下、右下、右上、左上 var顶点=新数组[ coords.x，coords.y，coords.z，//左下角 coords.x+imageSize.width，coords.y，coords.z，//右下角 coords.x+imageSize.width，coords.y+imageSize.height，coords.z，//右上角 coords.x，coords.y+imageSize.height，coords.z，//左上角 ] //设置此长方体的UV；这些UV标识以下角点： //左下、右下、右上、左上 var uvs=新的浮点数组[ 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, ] //索引=用作顶点的“顶点”中的索引位置序列 //我们制作了两个三角形，但只在对象中使用了4个不同的顶点 //THREE.BufferAttribute的第二个参数是元素数 //在每个顶点的第一个参数中 几何.setIndex[0,1,2,2,3,0] geometry.addAttribute'position'，新的3.BufferAttribute顶点，3； geometry.addAttribute'uv'，新的3.BufferAttribute uv，2 //创建一个纹理加载器，这样我们就可以加载我们的图像文件 var loader=新的3.TextureLoader； //指定纹理的url var url='1〕https://s3.amazonaws.com/duhaime/blog/tsne-webgl/assets/cat.jpg'; //为着色器指定自定义制服和属性 //统一类型：https://github.com/mrdoob/three.js/wiki/Uniforms-types var material=新的3.RawShaderMaterial{ 制服：{ 纹理：{ 类型：“t”， 值：loader.loadurl }, 透明：是的， }, vertexShader:document.getElementById'vertex-shader'.textContent， fragmentShader:document.getElementById'fragment-shader'.textContent }; //将图像几何体和材质组合成网格 var mesh=新的三个。Meshgeometry，material； //设置图像网格在x、y、z标注中的位置 网格位置设置0,0,0 //将图像添加到场景中 scene.addmesh； } /** *渲染！ **/ 函数渲染{ requestAnimationFramerender； renderer.renderscene，摄影机； 控制。更新； }; var scene=getScene； var-camera=getCamera； var renderer=getRenderer； var controls=getControlscamera，渲染器； 加载图像； 提供 你需要设置

material.transparent = true;

这样做将强制将正常alpha混合设置为aut 由渲染器进行渲染

---

three.js r.95

谢谢@WestLangley。现在有没有一种方法可以只设置纹理点精灵单个顶点的alpha度？我打算问另一个问题，但我想你可能会很快验证这是否可行。啊，似乎这是可能的！