Javascript Three.js：将RawShaderMaterial与线段一起使用

我正在处理一个渲染点和线段的three.js场景。如果对线条使用LineBasicMaterial材质，则渲染效果良好：

/**
*总账经理的构造函数
**/
函数世界（）{
this.renderTarget=document.querySelector（“#render target”）；
this.scene=this.getScene（）；
this.camera=this.getCamera（）；
this.renderer=this.getRenderer（）；
this.controls=this.getControls（）；
this.masterCounts=null；/{id:nMasters}
this.edges=null；//二维数组，其中[[master，app，app]]
this.positions=null；//{id:[x，y]}
this.z=0；//平面z尺寸
这是loadData（）；
这个。render（）；
}
World.prototype.getScene=函数（）{
返回新的3.Scene（）；
}
World.prototype.getContainerSize=函数（）{
var elem=this.renderTarget；
返回{
w：元素clientWidth，
h:elem.clientHeight，
}
}
World.prototype.getCamera=函数（）{
var size=this.getContainerSize（）；
var摄像机=新的三透视摄像机（75，尺寸w/尺寸h，0.01，10）；
摄像机位置设置（0.5,0.5，-0.67）；
返回摄像机；
}
World.prototype.getRenderer=function（）{
var renderer=new THREE.WebGLRenderer（{antialas:true，alpha:true}）；
var size=this.getContainerSize（）；
renderer.setPixelRatio（window.devicePixelRatio）；
渲染器.setSize（size.w，size.h）；
document.querySelector（“#render target”）.appendChild（renderer.domeElement）；
返回渲染器；
}
World.prototype.getControls=函数（）{
var controls=新的三个.trackball控件（this.camera、this.renderer.doElement）；
controls.zoomSpeed=0.4；
控制点速度=0.4；
控制目标设定值（0.5,0.5,1）；
返回控制；
}
World.prototype.render=函数（）{
requestAnimationFrame（this.render.bind（this））；
this.renderer.render（this.scene，this.camera）；
this.controls.update（）；
}
World.prototype.getPointScale=函数（）{
返回window.devicePixelRatio*window.innerHeight*0.00001；
}
World.prototype.loadData=函数（）{
得到（'https://s3.amazonaws.com/duhaime/blog/visualizations/line-segments-network/node-positions-twopi.json，函数（数据）{
this.positions=center（JSON.parse（data））；
得到（'https://s3.amazonaws.com/duhaime/blog/visualizations/line-segments-network/id-to-aggregate-masters.json，函数（数据）{
this.masterCounts=JSON.parse（数据）；
得到（'https://s3.amazonaws.com/duhaime/blog/visualizations/line-segments-network/edges.json，函数（数据）{
this.edges=JSON.parse（数据）；
这是addPoints（）；
这个。添加（）；
}.约束（这个）；
}.约束（这个）；
}.约束（这个）；
}
World.prototype.addPoints=函数（）{
var geometry=new THREE.InstancedBufferGeometry（），
translations=getPointTranslations（this.positions），
colors=getColors（this.positions，this.masterCounts）；
geometry.addAttribute（'位置'，
新的THREE.BufferAttribute（新的Float32Array（[0,0,0]），true，3））；
geometry.addAttribute（'translation'，
新的3.InstancedBufferAttribute（translations，3，true，1））；
geometry.addAttribute（'target'，
新的3.InstancedBufferAttribute（translations，3，true，1））；
geometry.addAttribute（'color'，
新的三个.InstancedBufferAttribute（colors，3，true，1））；
this.points=新的三个.points（几何体，this.getShaderMaterial（））；
this.points.frustumCulled=false；//禁止拖动网格
this.scene.add（this.points）；
}
World.prototype.addEdges=函数（）{
var指数=[]，
职位=[]，
idToIndex={}，//{node id:edgePositions中的索引}
ids=Object.keys（this.edges）；
//将边展平为[[s，t]，[s，t]]
对于（var i=0；i我认为发生这种情况是因为您在片段着色器中使用了
gl_PointCoord
，尽管您不是渲染点而是渲染线。如果删除以下两行代码，则渲染线：

vec2 coord = gl_PointCoord - vec2(0.5);
if (length(coord) > 0.5) discard;

演示：

也许对两个基本体使用不同的着色器程序更好。
你做得很好！谢谢@Mungen87。这似乎是着色器的一个有趣的怪癖，但我会解决它。。。