I am currently working on implementing GPU picking with Points using code that I adapted from the latter part of an article which can be found at this link
While it has been functioning properly on my desktop, I encountered inconsistencies when testing it across various browsers and devices. To demonstrate this issue, I have created a Codepen showcasing the problem: here
body {
margin: 0;
}
#c {
width: 100vw;
height: 100vh;
display: block;
}<canvas id="c"></canvas>
<script type="module">
// Three.js - Picking - RayCaster w/Transparency
// from https://threejsfundamentals.org/threejs/threejs-picking-gpu.html
import * as THREE from "https://threejsfundamentals.org/threejs/resources/threejs/r113/build/three.module.js";
function main() {
const canvas = document.querySelector("#c");
const renderer = new THREE.WebGLRenderer({ canvas });
const fov = 60;
const aspect = 2; // the canvas default
const near = 0.1;
const far = 200;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.z = 30;
const scene = new THREE.Scene();
scene.background = new THREE.Color(0);
const pickingScene = new THREE.Scene();
pickingScene.background = new THREE.Color(0);
// More code here...
┊If you interact (click or tap) on the nodes, their IDs are supposed to appear in the console. However, some devices only return 0, indicating the background is being picked.
Does anyone have insights into why this might be happening?
Additionally, if there are alternative methods for performing picking in this scenario (Point mesh with varying point sizes via ShaderMaterial) that are simpler yet retain performance, I would be interested in exploring those options
UPDATE:
I decided to remove the optimization involving the 1x1 render target, and it seems to have resolved the issue. Now, I'm curious to understand what specific aspect of that optimization was causing the problem...