Javascript GPU在不同设备之间的拾取不一致

我正在尝试使用本文后半部分修改的代码实现GPU点拾取

它在桌面上运行得很好，但我开始测试不同的浏览器和设备，但效果并不一致。我做了一个密码笔来说明

正文{
保证金：0；
}
#c{
宽度：100vw；
高度：100vh；
显示：块；
}

//Three.js-拾取-带透明度的RayCaster
//从https://threejsfundamentals.org/threejs/threejs-picking-gpu.html
从“导入*为三”https://threejsfundamentals.org/threejs/resources/threejs/r113/build/three.module.js";
函数main（）{
const canvas=document.querySelector（“#c”）；
const renderer=new THREE.WebGLRenderer（{canvas}）；
常数fov=60；
const aspect=2；//画布默认值
常数近=0.1；
常数far=200；
常量摄影机=新的三个透视摄影机（视野、方位、近距离、远距离）；
摄像机位置z=30；
const scene=new THREE.scene（）；
scene.background=新的三种颜色（0）；
const pickingsene=new THREE.Scene（）；
pickingScene.background=新的三种颜色（0）；
//将相机放在杆子上（将其设置为对象的父对象）
//所以我们可以旋转杆子在场景中移动摄影机
const cameraPole=new THREE.Object3D（）；
场景。添加（摄影机镜头）；
cameraPole.add（摄影机）；
函数randomNormalizedColor（）{
返回Math.random（）；
}
函数getRandomInt（n）{
返回Math.floor（Math.random（）*n）；
}
函数getCanvasRelativePosition（e）{
const rect=canvas.getBoundingClientRect（）；
返回{
x:e.clientX-右左，
y:e.clientY-rect.top
};
}
const textureLoader=新的三个.textureLoader（）；
常量颗粒结构=
"https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/sprites/ball.png";
常量顶点着色器=`
属性浮动大小；
属性vec3自定义颜色；
可变vec3颜色；
void main（）{
vColor=自定义颜色；
vec4 mvPosition=modelViewMatrix*vec4（位置，1.0）；
gl_PointSize=尺寸*（100.0/长度（mvPosition.xyz））；
gl_位置=投影矩阵*mvPosition；
}
`;
常量碎片着色器=`
二维纹理均匀；
可变vec3颜色；
void main（）{
vec4 t颜色=纹理2d（纹理，gl_点坐标）；
如果（t颜色a<0.5）丢弃；
gl_FragColor=mix（vec4（vColor.rgb，1.0），tColor，0.1）；
}
`;
常量pickFragmentShader=`
二维纹理均匀；
可变vec3颜色；
void main（）{
vec4 t颜色=纹理2d（纹理，gl_点坐标）；
如果（t颜色a<0.25），则丢弃；
gl_FragColor=vec4（vColor.rgb，1.0）；
}
`;
常数材料设置={
制服：{
纹理：{
类型：“t”，
值：textureLoader.load（particleTexture）
}
},
vertexShader:vertexShader，
fragmentShader:fragmentShader，
混合：3.5%混合，
深度测试：正确，
透明：假
};
常量createParticleMaterial=（）=>{
常量材质=新的三个着色器材质（材质设置）；
退料；
};
const createPickingMaterial=（）=>{
const material=新的3.ShaderMaterial({
…材料设置，
fragmentShader:pickFragmentShader，
混合：3.5%混合
});
退料；
};
const geometry=new THREE.BufferGeometry（）；
const pickingGeometry=new THREE.BufferGeometry（）；
常量颜色=[]；
常量大小=[]；
常量pickingColors=[]；
const pickingColor=new THREE.Color（）；
常量位置=[]；
for（设i=0；i<30；i++）{
颜色[3*i]=randomNormalizedColor（）；
颜色[3*i+1]=randomNormalizedColor（）；
颜色[3*i+2]=randomNormalizedColor（）；
const rgbPickingColor=pickingColor.setHex（i+1）；
PickingColor[3*i]=rgbPickingColor.r；
PickingColor[3*i+1]=rgbPickingColor.g；
PickingColor[3*i+2]=rgbPickingColor.b；
大小[i]=getRandomInt（20）；
位置[3*i]=getRandomInt（20）；
位置[3*i+1]=getRandomInt（20）；
位置[3*i+2]=getRandomInt（20）；
}
geometry.setAttribute(
“职位”，
新的3.Float32BufferAttribute（位置，3）
);
geometry.setAttribute(
“自定义颜色”，
新的3.Float32BufferAttribute（颜色，3）
);
geometry.setAttribute（“size”，新的三个.Float32BufferAttribute（size，1））；
geometry.computeBoundingBox（）；
const material=createParticleMaterial（）；
常量点=新的三个点（几何体、材质）；
//设置用于GPU拾取的几何图形和材质
pickingGeometry.setAttribute(
“职位”，
新的3.Float32BufferAttribute（位置，3）
);
pickingGeometry.setAttribute(
“自定义颜色”，
新的THREE.Float32BufferAttribute（PickingColor，3）
);
pickingGeometry.setAttribute(
“大小”，
新的3.Float32BufferAttribute（大小，1）
);
pickingGeometry.computeBoundingBox（）；
常量pickingMaterial=createPickingMaterial（）；
常量拾取点=新的三个点（拾取几何体、拾取材料）；
场景。添加（点）；
pickingsene.add（拾取点）；
函数resizeRenderToDisplaySize（渲染器）{
const canvas=renderer.domeElement；
const width=canvas.clientWidth；
常数高度=canvas.clientHeight；
const needResize=canvas.width！==width | | canvas.height！==height；
如果（需要调整大小）{
设置大小（宽度、高度、假）；
}
返回需要调整大小；
}
类GPUPickHelper{
构造函数（）{
//创建1x1像素的渲染目标
this.pickingTexture=new-THREE.WebGLRenderTarget（1,1）；
this.pixelBuffer=新的Uint8Array（4）；
}
拾取（CSS位置、拾取场景、摄影机）{
常量{pickingTexture，pixelBuffer}=此；
//将视图偏移设置为仅表示鼠标下的单个像素
const pixelRatio=renderer.getPixelRatio（）；
camera.setViewOffset(
renderer.getContext（）.drawin