I'm experiencing an issue with my Three.js project where LineSegment meshes (and similar mesh types) do not render on iPhone Safari. I tested the project on two different iPhones, and while other meshes show up correctly, the lines are completely missing. I didn't see any errors in the eruda console. You can check out a live example here: https://sepweb.dev/linetest5

This is the code that sets up the scene, initializes the lines, and handles the animation:

JAVASCRIPTCopied
import './reset.css';
import * as Three from 'three';
let scene, vpAspect, camera, camSocket, renderer, canvas;
let lineGeo, lines;
const lineCount = 10000;
let lastUpdate;
const camDepth = 300;
const cameraOffsetBuffer = 5000;
const lineMaxLength = 1000;
const lineMinLength = 400;

document.addEventListener("DOMContentLoaded", async () =>
{
  initWorld();
});    

function initWorld()
{
  scene = new Three.Scene();
  vpAspect = window.innerWidth / window.innerHeight;
  camera = new Three.PerspectiveCamera(60, vpAspect, 1, 4000);
  camSocket = new Three.Object3D();
  camSocket.position.set(-1000, 0, 0);
  scene.add(camSocket);
  camSocket.add(camera);
  camera.position.set(0, 0, camDepth);
  camera.rotation.set(0, 0, 0);

  canvas = document.querySelector('#main');
  renderer = new Three.WebGLRenderer
  ({
    canvas: canvas,
    antialias: true,
    // preserveDrawingBuffer: false, //various settings I've tried
    // alpha: true,
    // premultipliedAlpha: false
  });
  renderer.setClearColor(0x000000);

  const winW = window.innerWidth;
  const winH = window.innerHeight;
  renderer.setSize(winW, winH);
  initLines();
  animate();
}
function initLines()
{
  const positions = new Float32Array(lineCount * 6); // 6 values per line (x1, y1, z1, x2, y2, z2)
  const initialYPositions = new Float32Array(lineCount);
  const colors = new Float32Array(lineCount * 3); // 3 values per vertex color (r, g, b)
  const velocities = new Float32Array(lineCount);
  const accelerations = new Float32Array(lineCount);
  const lengths = new Float32Array(lineCount);

  for(let i=0; i<lineCount;++i)
  {
    const range = cameraOffsetBuffer;
    const halfRange = range * 0.5;
    const x = Math.random() * 2 * range - range;
    const y = Math.random() * range - halfRange;
    const z = Math.random() * range - halfRange;
    const length = Math.random() * (lineMaxLength - lineMinLength) + lineMinLength;
    lengths[i] = length;
    //const height = Math.random() * 19 + 1;
    initialYPositions[i] = y;

    positions[i * 6] = x;
    positions[i * 6 + 1] = y;
    positions[i * 6 + 2] = z;
    positions[i * 6 + 3] = x - length;
    positions[i * 6 + 4] = y; // Adjust length of the line
    positions[i * 6 + 5] = z;

    setLineColor(colors, i);

    velocities[i] = 0;
    accelerations[i] = Math.random() * 0.001 + 0.015;
  }
  lineGeo = new Three.BufferGeometry();
  lineGeo.setAttribute('position', new Three.BufferAttribute(positions, 3));
  lineGeo.setAttribute('color', new Three.BufferAttribute(colors, 3));
  lineGeo.setAttribute('velocity', new Three.BufferAttribute(velocities, 1));
  lineGeo.setAttribute('acceleration', new Three.BufferAttribute(accelerations, 1));
  lineGeo.setAttribute('length', new Three.BufferAttribute(lengths, 1));
  lineGeo.setAttribute('initialYPosition', new Three.BufferAttribute(initialYPositions, 1));

  const lineMaterial = new Three.LineBasicMaterial({ vertexColors: true, linewidth: 1 });
  lines = new Three.LineSegments(lineGeo, lineMaterial);
  scene.add(lines);
}
function animate(time)
{
  time = isNaN(time) ? 0 : time;
  let delta = getDelta(time);
  //updateLines(delta)
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}
function getDelta(time)
{
  let delta = isNaN(lastUpdate) ? 0 : time - lastUpdate;
  lastUpdate = time;
  delta = Math.min(12, Math.max(delta, 0));
  return delta;
}
function setLineColor(colorArr, i)
{
  const color = getRandomColor();
  colorArr[i * 3] = color.r;//Math.random(); // Red
  colorArr[i * 3 + 1] = color.g; // Green
  colorArr[i * 3 + 2] = color.b; // Blue
}
function getRandomColor()
{
  const r = Math.random();
  const g = Math.random();
  const b = Math.random();
  return new Three.Color(r,g,b);
}

If anyone has encountered this issue or has ideas on why iPhone Safari might not be rendering these line segments, please share your suggestions.