Problem with shadows shaking with the csm plugin only visible on a mobile

espace3d · June 10, 2022, 12:08pm

Hello,

Here is the minimal code to illustrate my problem:

When I hold the click, the orange cube moves forward among the big green cubes (100 instances) and the projected shadows (trough plugin CSM) shake when I activate my “follow_camera_target” function.
But my fps is still 60fps.

The problem is that this problem appears only on mobile. On a computer, no shaking noticed. I have below the codepen of the code but that will not illustrate the problem… :

Here is a gif of the problem encountered on mobile :

2022_06_10_13_51_59

And here is also attached the apk of this piece of code that allows to realize the concern on mobile.

app-debug.apk (1,1 Mo)

Could you help me about that ? I must admit that on this one, I have no idea where the problem could come from

espace3d · June 10, 2022, 6:25pm

Hi,

If you run the Codepen from a mobile you will see also the shadows shaking.

Thanks for your help…

yannick · June 10, 2022, 8:15pm

Your app runs on my Pixel 2 XL with only 25fps. Maybe try to optimize something and the bug will go away?

espace3d · June 10, 2022, 8:35pm

On my Samsung S9, it runs with 60fps.

2022_06_10_22_43_14

Your Pixel 2XL is normally better than my phone

Maybe try to optimize something

i use instances for my big cubes (only 100 elements).
My CSM settings are very low
It’s only a flag that allow to move my cube
my “follow_camera_target” function runs only once since it is locked by my data.camera_could_move flag

… what could i do more ?

yannick · June 10, 2022, 9:24pm

On my Laptop (Lenovo P15s) it runs at 40-50fps. Without CSM it runs at 60fps.

Why even use CSM? Here it looks like your entire scene has very nice shadows. (I assume you don’t use CSM there)

espace3d · June 10, 2022, 9:42pm

Yes i use csm on this app.
On huge scene, i don’t find a solution to simulate shadow correctly…

But, i don’t believe that’s it’s depending on CSM. The same scene wihtout function “camera_follow_target”. Only orbitcontrols and no problems with shadows shaking :

I think that my function “camera_follow_target” is not perfect, but i don’t see where is the problem.

Chaser_Code · June 11, 2022, 4:38am

Shaking visible also on PC

Ranao · June 11, 2022, 6:02am

Thats because the cube is so small to see the the shadows in millimeters. Make the cube 1000 x 1000 x 1000 units, this will make the shadow switching in millimeters invisible.

espace3d · June 11, 2022, 7:20am

I try with 1000x1000x1000, it’s not the solution…

On this game all are set like my parameters and it works without shadow shaking :

https://jblaha.art/sketchbook/0.4/

github.com

swift502/Sketchbook/blob/64f591a7ade4a44d94d5fc4bcdacf836b889c957/src/ts/characters/Character.ts

import * as THREE from 'three';
import * as CANNON from 'cannon';
import * as _ from 'lodash';
import * as Utils from '../core/FunctionLibrary';

import { KeyBinding } from '../core/KeyBinding';
import { VectorSpringSimulator } from '../physics/spring_simulation/VectorSpringSimulator';
import { RelativeSpringSimulator } from '../physics/spring_simulation/RelativeSpringSimulator';
import { Idle } from './character_states/Idle';
import { EnteringVehicle } from './character_states/vehicles/EnteringVehicle';
import { ExitingVehicle } from './character_states/vehicles/ExitingVehicle';
import { OpenVehicleDoor as OpenVehicleDoor } from './character_states/vehicles/OpenVehicleDoor';
import { Driving } from './character_states/vehicles/Driving';
import { ExitingAirplane } from './character_states/vehicles/ExitingAirplane';
import { ICharacterAI } from '../interfaces/ICharacterAI';
import { World } from '../world/World';
import { IControllable } from '../interfaces/IControllable';
import { ICharacterState } from '../interfaces/ICharacterState';
import { IWorldEntity } from '../interfaces/IWorldEntity';
import { VehicleSeat } from '../vehicles/VehicleSeat';

This file has been truncated. show original

Umbawa_Sarosong · June 11, 2022, 9:03am

This threejs project has high quality csm shadow

espace3d · June 11, 2022, 8:39pm

Yes Thanks but the performance are poor…

espace3d · June 11, 2022, 8:42pm

@Ranao
@yannick
@Chaser_Code
@Umbawa_Sarosong

Could you test this version ?

app-debug.apk (1,0 Mo)

On my phone, no lags and no shaking shadows…

yannick · June 11, 2022, 8:56pm

Pixel 2 XL

espace3d · June 11, 2022, 9:01pm

why,why,why ???

yannick · June 11, 2022, 9:05pm

It has a DPI of 3.5
Maybe try:
renderer.setPixelRatio(Math.max(1,window.devicePixelRatio/2));

espace3d · June 11, 2022, 9:09pm

app-debug.apk (1,0 Mo)

Could you test with your modification ?

I hope it’s better

yannick · June 11, 2022, 9:12pm

61fps without noticeable change in quality.

espace3d · June 11, 2022, 9:13pm

hoooo thank you.

Chaser_Code · June 12, 2022, 5:49am

No shaking

espace3d · June 12, 2022, 8:59am

Thanks for your test

Topic		Replies	Views
CSM Shadow bug? Questions geometry , shaders , shadows , cascaded-shadow-maps , shadowmap	7	677	October 29, 2023
CSM shadows look "bad" [Solved] Questions csm	2	1686	December 31, 2020
Cascaded shadow maps! Showcase shadows	17	2838	January 28, 2020
Cascaded Shadow Maps Discussion shadows , shadow-map , cascaded-shadow-maps , csm	6	2825	August 6, 2019
Camera target.set(...) causing world shake/jittering Questions camera	6	1736	November 9, 2023

Problem with shadows shaking with the csm plugin only visible on a mobile

Related topics