Particles not Rendering on iOS devices

[VedantSG123]

Hi, I have written code for rendering particles, it works flawlessly on andriod, windows, linux and MacOS. The issue is with IOS devices (Iphones and Ipads), where the particles are not at all visible (on both perspective and orthographic camera)

import * as THREE from 'three'
import Experience from '../Experience'

export default class Galaxy
{
    constructor()
    {
        this.experience = new Experience()
        this.scene = this.experience.scene
        this.debug = this.experience.debug

        this.galaxyGeometry = null
        this.galaxyMaterial = null
        this.galaxyMesh = null
        this.parameters = {
            count:3000,
            size:0.0005,
            branches:5,
            radius:7,
            spiralCurve:1,
            randomness:0.8,
            power:2.5,
            insideColor:"#fec006",
            outsideColor:"#7d01f9",
        }

        this.generateGalaxy(this.parameters)
        this.setGalaxyPosition()

        // this.debug.gui.add(this.parameters, 'count').min(100).max(10000).step(100).onFinishChange(() => {this.generateGalaxy()})
        // this.debug.gui.add(this.parameters, 'size').min(0.01).max(1).step(0.01).onFinishChange(() => {this.generateGalaxy()})
        // this.debug.gui.add(this.parameters, 'branches').min(1).max(20).step(1).onFinishChange(() => {this.generateGalaxy()})
        // this.debug.gui.add(this.parameters, 'radius').min(5).max(20).step(1).onFinishChange(() => {this.generateGalaxy()})
        // this.debug.gui.add(this.parameters, 'spiralCurve').min(0).max(2).step(0.01).onFinishChange(() => {this.generateGalaxy()})
        // this.debug.gui.add(this.parameters, 'randomness').min(0).max(2).step(0.1).onFinishChange(() => {this.generateGalaxy()})
        // this.debug.gui.add(this.parameters, 'power').min(1).max(5).step(0.5).onFinishChange(() => {this.generateGalaxy()})
        // this.debug.gui.addColor(this.parameters, 'insideColor').onFinishChange(() => {this.generateGalaxy()})
        // this.debug.gui.addColor(this.parameters, 'outsideColor').onFinishChange(() => {this.generateGalaxy()})

        
        this.createGalaxyCone()
    }

    generateGalaxy(parameters)
    {
       
        if(this.galaxyMesh !== null){
            this.galaxyGeometry.dispose()
            this.galaxyMaterial.dispose()
            this.scene.remove(this.galaxyMesh)
        }
        this.galaxyGeometry = new THREE.BufferGeometry()
        this.position = new Float32Array(parameters.count * 3)
        this.color = new Float32Array(parameters.count * 3)

        for(let i=0; i<parameters.count; ++i){
            const i3 = i * 3

            //position
            const angle = (Math.PI * 2) * ((i%parameters.branches)/parameters.branches)
            const radius = Math.random() * parameters.radius
            const disturb = Math.pow(Math.random()*parameters.randomness, parameters.power)
            this.position[i3] = Math.sin(angle + parameters.spiralCurve*radius) * radius + disturb * (Math.random() > 0.5 ? 1 : -1) //x
            this.position[i3 + 2] = Math.cos(angle + parameters.spiralCurve*radius) * radius  + disturb * (Math.random() > 0.5 ? 1 : -1) //z
            this.position[i3 + 1] = 0 + disturb * (Math.random() > 0.5 ? 1 : -1) //y

            //colors
            const insideColor = new THREE.Color(parameters.insideColor)
            const outsideColor = new THREE.Color(parameters.outsideColor)
            const mixedColor = insideColor.clone()
            mixedColor.lerp(outsideColor, radius/parameters.radius)

            this.color[i3] = mixedColor.r
            this.color[i3 + 1] = mixedColor.g
            this.color[i3 + 2] = mixedColor.b
        }

        this.galaxyGeometry.setAttribute('position', new THREE.Float32BufferAttribute(this.position, 3))
        this.galaxyGeometry.setAttribute('color', new THREE.Float32BufferAttribute(this.color, 3))

        this.galaxyMaterial = new THREE.PointsMaterial({
            size:parameters.size,
            sizeAttenuation:true,
            depthTest:true,
            depthWrite:false,
            blending:THREE.AdditiveBlending,
            vertexColors:true
        })

        this.galaxyMesh = new THREE.Points(this.galaxyGeometry, this.galaxyMaterial)
        // this.scene.add(this.galaxyMesh)
    }

    setGalaxyPosition()
    {
        console.log(this.galaxyMesh)
        this.galaxyMesh.scale.set(0.125, 0.125, 0.125)
        this.galaxyMesh.rotateX(Math.PI/6)
        this.galaxyMesh.position.set(0.1, 0, -2.4)
    }

    createGalaxyCone()
    {
        this.galaxyCone = new THREE.Mesh(
            new THREE.ConeGeometry(1.5, 1.25, 24, 1, true),
            new THREE.MeshBasicMaterial({color:0x000000, side: THREE.DoubleSide})
        )
        this.galaxyCone.rotateX(-Math.PI/2)
        this.galaxyCone.position.set(0.1, 0.1, -3.3)
        
    }

    rotateGalaxy()
    {
        this.galaxyMesh.rotation.y += ((2*Math.PI) / 5000 )
    }
   
}

As you can see, particles are not visible on ipad, where as on windows it works fine.

[Mugen87]

Can you try to increase the size parameter of the point cloud’s material? The unit of this parameter is pixels and 0.0005 might be too small.