WebGPU Skeleton animation is partially broken?

Questions
,
1

I am checking the WebGPU example of skeleton animation here:

It was stated there that it must work like that:

Animating bones
To make skeleton animations work in the fast SR mode, you simply need to call the prepare method on the skeletons you want to animate

But it does not render until I resize the window and produce tons of errors like that:

[Buffer "BabylonWebGPUDevice0_DataBufferUniqueId=137-leftOver-pbr+pbr@#define MATERIALPLUGIN_8|#define BRDF_V_HEIGHT_CORRELATED|#define MS_BRDF_ENERGY_CONSERVATION|#define SPHERICAL_HARMONICS|#define SPECULAR_GLOSSINESS_ENERGY_CONSERVATION|#define MIX_IBL_RADIANCE_WITH_IRRADIANCE|#define LEGACY_SPECULAR_ENERGY_CONSERVATION|#define BASE_DIFFUSE_MODEL 0|#define DIELECTRIC_SPECULAR_MODEL 0|#define CONDUCTOR_SPECULAR_MODEL 0|#define CLEARCOAT_TEXTUREDIRECTUV 0|#define CLEARCOAT_TEXTURE_ROUGHNESSDIRECTUV 0|#define CLEARCOAT_BUMPDIRECTUV 0|#define CLEARCOAT_TINT_TEXTUREDIRECTUV 0|#define IRIDESCENCE_TEXTUREDIRECTUV 0|#define IRIDESCENCE_THICKNESS_TEXTUREDIRECTUV 0|#define ANISOTROPIC_TEXTUREDIRECTUV 0|#define SHEEN_TEXTUREDIRECTUV 0|#define SHEEN_TEXTURE_ROUGHNESSDIRECTUV 0|#define SS_THICKNESSANDMASK_TEXTUREDIRECTUV 0|#define SS_REFRACTIONINTENSITY_TEXTUREDIRECTUV 0|#define SS_TRANSLUCENCYINTENSITY_TEXTUREDIRECTUV 0|#define SS_TRANSLUCENCYCOLOR_TEXTUREDIRECTUV 0|#define DETAILDIRECTUV 0|#define DETAIL_NORMALBLENDMETHOD 0|#define DEPTH_SENSING_DISCARD|#define PBR|#define NUM_SAMPLES 0|#define ALBEDODIRECTUV 0|#define BASE_WEIGHTDIRECTUV 0|#define BASE_DIFFUSE_ROUGHNESSDIRECTUV 0|#define AMBIENTDIRECTUV 0|#define OPACITYDIRECTUV 0|#define ALPHATESTVALUE 0.4|#define SPECULAROVERALPHA|#define RADIANCEOVERALPHA|#define EMISSIVEDIRECTUV 0|#define REFLECTIVITYDIRECTUV 0|#define SPECULARTERM|#define LODBASEDMICROSFURACE|#define MICROSURFACEMAPDIRECTUV 0|#define METALLICWORKFLOW|#define METALLIC_REFLECTANCEDIRECTUV 0|#define REFLECTANCEDIRECTUV 0|#define ENVIRONMENTBRDF|#define NORMAL|#define BUMPDIRECTUV 0|#define NORMALXYSCALE|#define LIGHTMAPDIRECTUV 0|#define REFLECTION|#define REFLECTIONMAP_3D|#define REFLECTIONMAP_CUBIC|#define USESPHERICALFROMREFLECTIONMAP|#define USESPHERICALINVERTEX|#define RADIANCEOCCLUSION|#define HORIZONOCCLUSION|#define PREPASS_COLOR_INDEX -1|#define PREPASS_IRRADIANCE_INDEX -1|#define PREPASS_ALBEDO_INDEX -1|#define PREPASS_ALBEDO_SQRT_INDEX -1|#define PREPASS_DEPTH_INDEX -1|#define PREPASS_SCREENSPACE_DEPTH_INDEX -1|#define PREPASS_NORMALIZED_VIEW_DEPTH_INDEX -1|#define PREPASS_NORMAL_INDEX -1|#define PREPASS_WORLD_NORMAL_INDEX -1|#define PREPASS_POSITION_INDEX -1|#define PREPASS_LOCAL_POSITION_INDEX -1|#define PREPASS_VELOCITY_INDEX -1|#define PREPASS_VELOCITY_LINEAR_INDEX -1|#define PREPASS_REFLECTIVITY_INDEX -1|#define SCENE_MRT_COUNT 0|#define NUM_BONE_INFLUENCERS 4|#define BonesPerMesh 0|#define BONETEXTURE|#define NUM_MORPH_INFLUENCERS 0|#define VIGNETTEBLENDMODEMULTIPLY|#define TONEMAPPING 0|#define SAMPLER3DGREENDEPTH|#define SAMPLER3DBGRMAP|#define USEPHYSICALLIGHTFALLOFF|#define CAMERA_PERSPECTIVE|#define AREALIGHTSUPPORTED|#define SPECULARAA|#define DEBUGMODE 0|#define LIGHT0|#define HEMILIGHT0||#define IS_NDC_HALF_ZRANGE_UniformList:vAlbedoInfos,vBaseWeightInfos,vBaseDiffuseRoughnessInfos,vAmbientInfos,vOpacityInfos,vEmissiveInfos,vLightmapInfos,vReflectivityInfos,vMicroSurfaceSamplerInfos,vReflectionInfos_CopyDst_Uniform_size3040"] used in submit while destroyed.
 - While calling [Queue].Submit([[CommandBuffer from CommandEncoder "upload"], [CommandBuffer from CommandEncoder "render"]])

At least it is like that in Google Chrome 137.0.7151.104 on Mac OS Apple Silicon

Is it possible to fix that right now?

2

cc @sebavan

3

hum…It works if we run it twice…cc @Evgeni_Popov too

4

Brave is not dropping that error.

6

As a workaround for now, increasing the time to enable snapshots should work: https://playground.babylonjs.com/?webgpu#WGZLGJ#11265

@ryantrem is this model ok in the viewer ? as I know you worked a lot on the snapshot part.

1 Like
7

Yes, it works in the Viewer, as seen here: Babylon.js Viewer Configurator

I would recommend using the SnapshotRenderingHelper as it takes care of a lot of the timing complexity for you. Here is a working example PG: https://www.babylonjs-playground.com/?webgpu#RL14I3#15

2 Likes
8

Thank you for the help!

But now I have the next question: what is the correct way to make meshes visible / not visible when they enter the camera cone?

Here is an example where only part of the meshes are visible:

image
image1920Ă—1149 126 KB

Also, now it consumes quite a lot of RAM, is it possible to make in RAM optimised? Like thin instances, I saw bakedVertexAnimationManager but have no idea how to make it all work together, I knew limitations, but I still need optimised version with a lot instances animated

image
image1202Ă—482 46 KB

9

The snapshot mode is fast cause it capture everything of a particular frame and “replays” so it can not dynamically cull and so on. In your case the snapshot might not be the best option or you would need to do it from a point of view where all the meshes are in the view and let the gpu discard instead of the cpu.

You are instantiating quite a few meshes which are “clone” in your case and not “instances” as they contain a skeleton. This requires more data per asset added to the scene.

VAT might be the way to go indeed: Babylon.js docs

1 Like
10

Thank you for the advise!

And there are any way to frustum cull VATs/thin instances ? Or I will need to render all of them?

11

They are all rendered (gpu does a great cheap discard job) within one draw so it might be counter productive to pre cull / refresh / reorder the list.