Particle system broken on iOS 15

[ephb]

Description

Currently the particle system does not work on iOS 15. Tested on iPhone 12 pro.

Steps to reproduce:

Visit any sample on iPhone. Note absence of particles.

Log

When connecting the Safari developer console we can see the following errors. The first one cane safely be ignored:

[Error] Failed to recalculate device parameters.
	(anonyme Funktion) (aframe.min.js:129:18455)
	D (aframe.min.js:128:5326)
	E (aframe.min.js:128:10353)
	(anonyme Funktion) (aframe.min.js:131:24180)
	(anonyme Funktion) (aframe.min.js:131:25520)
	e (aframe.min.js:128:552)
	(anonyme Funktion) (aframe.min.js:340:186)
	s (aframe.min.js:1:625)
	e (aframe.min.js:1:793)
	(anonyme Funktion) (aframe.min.js:1:810)
	(anonyme Funktion) (aframe.min.js:1:318)
	Globaler Code (aframe.min.js:1:323)
[Error] THREE.WebGLProgram: shader error:  – 1282 – "gl.VALIDATE_STATUS" – false – "gl.getProgramInfoLog" (3)
"Internal error compiling shader with Metal backend.
Please submit this shader, or website as a bug to https://bugs.webkit.org"
""
""
	oe (aframe.min.js:99:8547)
	(anonyme Funktion) (aframe.min.js:99:13616)
	w (aframe.min.js:100:17437)
	M (aframe.min.js:100:19086)
	(anonyme Funktion) (aframe.min.js:100:31239)
	_ (aframe.min.js:100:16688)
	b (aframe.min.js:100:16323)
	(anonyme Funktion) (aframe.min.js:101:1647)
	render (aframe.min.js:254:9952)
	(anonyme Funktion) (aframe.min.js:379:138)
	e (aframe.min.js:254:8869)
	(anonyme Funktion) (aframe.min.js:254:9038)
	dispatchEvent
	emit (aframe.min.js:244:3322)
	setActiveCamera (aframe.min.js:365:1659)
	updateActiveCamera (aframe.min.js:145:796)
	update (aframe.min.js:145:604)
	updateProperties (aframe.min.js:248:3741)
	updateComponent (aframe.min.js:240:5962)
	updateComponents (aframe.min.js:240:5780)
	(anonyme Funktion) (aframe.min.js:240:3652)
	(anonyme Funktion) (aframe.min.js:244:1568)
	promiseReactionJob
[Error] WebGL: INVALID_OPERATION: useProgram: program not valid
	useProgram
	m (aframe.min.js:99:27371)
	M (aframe.min.js:100:19197)
	(anonyme Funktion) (aframe.min.js:100:31239)
	_ (aframe.min.js:100:16688)
	b (aframe.min.js:100:16323)
	(anonyme Funktion) (aframe.min.js:101:1647)
	render (aframe.min.js:254:9952)
	(anonyme Funktion) (aframe.min.js:379:138)
	e (aframe.min.js:254:8869)
	(anonyme Funktion) (aframe.min.js:254:9038)
	dispatchEvent
	emit (aframe.min.js:244:3322)
	setActiveCamera (aframe.min.js:365:1659)
	updateActiveCamera (aframe.min.js:145:796)
	update (aframe.min.js:145:604)
	updateProperties (aframe.min.js:248:3741)
	updateComponent (aframe.min.js:240:5962)
	updateComponents (aframe.min.js:240:5780)
	(anonyme Funktion) (aframe.min.js:240:3652)
	(anonyme Funktion) (aframe.min.js:244:1568)
	promiseReactionJob
[Error] WebGL: INVALID_OPERATION: useProgram: program not valid
	useProgram
	m (aframe.min.js:99:27371)
	M (aframe.min.js:100:19197)
	(anonyme Funktion) (aframe.min.js:100:31239)
	_ (aframe.min.js:100:16688)
	b (aframe.min.js:100:16323)
	(anonyme Funktion) (aframe.min.js:101:1647)
	render (aframe.min.js:254:9952)
	(anonyme Funktion) (aframe.min.js:379:138)
	y (aframe.min.js:100:15182)

Please excuse the German locale that is used here. I think I should raise this issue with threes as well.

[cityguy]

Will there be any update on this?

[ephb]

I have tried again with iOS 15.1 Beta 4 as there are a lot of webkit bugs being fixed, but this is still broken.

[noremorse]

I have tried again with iOS 15.1 Beta 4 as there are a lot of webkit bugs being fixed, but this is still broken.

Did you find a solution for this?

[ephb]

Sadly no. I am not proficient enough in JavaScript and Three.js to fix this myself. I am using another particle system for now: https://github.com/harlyq/aframe-mesh-particles-component

[ephb]

The particle system is working again in iOS 15.2

[telime]

It works on iOS 15.2, but it doesn't seem to reflect the size property...

[ephb]

@telime Do you have a link to glitch or codepen with an example?

[telime]

@ephb Thank you for your reply, I have previewed the code that reproduces the phenomenon below. Particles intended for smoke production are rendered in a very small rice grain-like size. I think it's probably the Webkit team's job to solve this problem, but use it as a way to share information if anyone else stumbles. https://codepen.io/telime-hiroro/full/eYGjyrz

[telime]

I have confirmed that this issue has been fixed in iOS 15.4. Thank you!

[saintjimmy17]

Has anyone been able to use it in a version of iOS 16? In my case the library does not work

[vincentfretin]

https://c-frame.github.io/aframe-particle-system-component/ All the examples are working for me on iPad iOS 16. Please be sure you use the latest version of the c-frame fork, see #72 for context.