Develop Reference

Improve Unity 3D AR game performance [Low FPS]

WE have created a Unity-based AR car game that uses the head position of the user for moving the car left or right similar to any simple mobile car race video game.
The game is a web-based AR game and uses unity WebGL output. As for head tracking, we are using Mediapipe.js. We have tested the experience on different OS and the following are the fps results.
Model
Browser
FPS & Range
Benchmark
MediaPipe Face Detection
Chrome PC
62(60-74)
60/100
MediaPipe Face Detection
Chrome Android
10(6-11 )
30
MediaPipe Face Detection
Chrome IOS
12(8-12 )
30
We are looking to achieve benchmark 30fps in mobile devices using Mediapipe. Any solutions or insights on improving the performance to make the game smoother are appreciated.
references:
Mediapipe Face Detection {Model: #mediapipe/face_detection#0.4.1 | model-config: short}
Tech-stack
HTML5/CSS JS(ES6)

Start with profiling. First you need to understand what operations are slowing down your application. It could be:
Lots of CPU work per frame
Load on the GPU due to unoptimized and non-mobile shaders, a large number of vertices (100-150K+) or a large number of draw calls (if there are many different materials that are not batched)
Frequent memory allocation and deallocation

Bad rendering of ParticleSystems in Three.js with low graphic cards

I am trying to use particle systems to speed up the rendering of a system of stars, but I've noticed that the display is really bad on weak graphic cards (for example on Intel HD, which are pretty widespread). The particles, which should have a specific texture, are replaced by ugly squares with strange colors and transparency. For instance, this system of particles renders to :
This can be reproduced with any instance of THREE.ParticleSystem or THREE.Points (the more modern version). All the other THREE objects (Sphere, Cubes, Planes, etc.) are rendering well on my GPU, only particles bug.
Is there a way to avoid this effect? Otherwise, is there another method than particle systems to display a large number of objects without slowing down?

I'm not sure about your specific case but I've found that drawing a 'Point' primitives may be problematic for some GPUs, drivers and/or API versions.
They are just a primitive type and should work the same as Triangles and Lines, but for some GPUs - especially the low-end ones - they just don't work. And if the drawing Points works by itself - it doesn't support point sizes, or texturing, or something else...
In such case you may replace them with regular textured quad and it should be fine. You'll probably lose some performance this way so you may keep both approaches and select one based on GPU.

Problems with lights (using three.js)

I have a simple indoor scenario I've exported from blender. It has a room with 3 spheres on the ceiling, and the respective light sources inside them. Each one of the lights work well on their own, but when I insert all of them in the scene, only one of them works! Works with 2, sometimes, but never with the three of them.
Here's my code for the lights:
luz_sala1 = new THREE.PointLight(0xFFFFFF,0.5, 50.0);
luz_sala1.position = new THREE.Vector3(16.14323,2.52331,13.93375);
scene.add(luz_sala1);
luz_sala2 = new THREE.PointLight(0xFFFFFF, 0.5, 50.0);
luz_sala2.position = new THREE.Vector3(27.70114,2.52331,-6.20571);
scene.add(luz_sala2);
luz_sala3 = new THREE.PointLight(0xFFFFFF, 0.5, 50.0);
luz_sala3.position = new THREE.Vector3(21.50580,3.10719,-27.82775);
scene.add(luz_sala3);
If I set the distances to 0, it works well, but I need these lights to influence only the area they are in.
I've also tried with THREE.Spotlight(0xFFFFFF,0.5,50.0,Math.PI, 0) but with the same result.
It looks like the lights negate each other when they share the same distance somehow?
Please help, this is very confusing.
EDIT: Also, I have another section of the room with some spotlight models (I have about 4 of them), but I'm getting shader compiling errors when I add those 4 more spotlights to the scene. After searching for the problem, I saw that I need to set the maxLights property in the renderer. I set it to 10, but the problem still occurs, I can't have more than 4 lights in the scene. Is there anything else I can do?
EDIT 2: Here are some images. For reference, the "luz_sala1" is the one closer to the TV, the "luz_sala2" is the middle one, and the "luz_sala3" is the one more far away.
This one is with the code above (all 3 lights), except with 0.8 intensity.
http://www.mediafire.com/view/?s85qr4rplhort29
And this is with the 2 and 3 turned on (commented the "scene.add(luz_sala1);"):
http://www.mediafire.com/view/?83qbbua9f8ee3b4
So, as you can see, 2 point lights work well together, but with 3 they seem to "add up" to the first?

The maxLight property not having any effect is most likely due to your hardware, drivers or ANGLE (library that translates WebGL to Direct3D) not supporting enough varying vectors in shaders - each light requires one and other things too. This might also be in the background of your general problem.
In order to have more lights there are three options:
Try if it helps if you make your browser prefer native OpenGL over ANGLE (google for instructions). Make sure you have up-to-date OpenGL drivers installed though.
Implement a deferred renderer. This is nowadays very common in the desktop world, but it's tricky if not impossible to implement with good performance in WebGL due to framebuffer limitations.
Implement a light manager that only ever uses some lights, disabling the rest. Simplest, though far from perfect method would be to select the lights closest to the camera.
Also worth mentioning is that currently SpotLights are just PointLights that cast shadow to one direction.

Creating a real 3D website

Would it be possible to create a truly 3D website using technologies such as WebGL? By 3D I mean, using a 3D monitor.
Firstly does any browser implementation of WebGL provide any type of functionality that allows for 3D such as Quad Buffering?
Is there any other plausible approach to making a 3D webpage, be-it flash, a browser pluggin etc? (not anaglyph)

Side-by-side stereo would work fine for mobile devices, provided you have something like an FOV2Go or Hasbro My3D viewer to look at them:
http://projects.ict.usc.edu/mxr/diy/fov2go/
http://www.hasbro.com/hasbromy3d/en_us/shop/browse/_/N-1rZgt/Ntt-my3d&viewer?Ntx=mode+matchallpartial&Items=50&Ntk=All
In this case, you would simply draw your scene twice, at slightly different angles, like the example here:
http://fhtr.blogspot.com/2010/06/webgl-stereo-rendering-demo.html

Is it possible to create a polarized 3d website?

is it possible to create a website which would display in 3d similar to 3d games or movies? What if I were to modulate the website using some sort of css or webgl technique?
Something which i've found quite interesting is adjusting the angle of an image e.g:

Polarised would require APIs that don't exist (yet). You can however play with analglyphic techniques.
I made this 3d spinning cube (requires a browser with 3d transforms to work) that uses red cyan glasses to work: http://css3.bradshawenterprises.com/demos/3d.php
It kinda works!

Doing a 3d website is possible, but hard, using red/cyan anaglyph glasses. Getting 3d using active shutter glasses is perhaps theoretically possible, but almost certainly unfeasible without huge timing issues. Polarized glasses is impossible without using a projector with a split image lens and polarized filters (or two projectors).

Latest stable version of Chrome 9 now has built-in support for WebGL. Some of famous example will be Aquarium, Jellyfish and even Virtual globe.