Material performance and optimization

Hi!

Generally, it depends on how complex are the materials that you want to optimize. Also, the performance gain can vary on different hardware.

If the materials are simple as you say, then it’s quite possible that you won’t get any noticeable difference. But on the other hand you have thousands of them, so… the only answer is to test that.

You can use the v3d performance profiler in your current project to check how much time the materials take to render. You can do that through the puzzle System->print_performance_info or just pasting this into the console: v3d.apps[0].printPerformanceInfo().

You’ll get various rendering info printed in the console, but the sections that are important in your case are “Materials and Shaders” and “Total Render Time”. If you aim at 60 fps then the total render time shouldn’t be higher than 16ms. Also, if it’s quite low (5-6ms) then there’s probably no point in optimizing at all.

Also, from “Materials and Shaders” you can see if there are any materials that take much longer time to render than others and therefore are a potential bottleneck.

Also, you can do this quick test:

v3d.apps[0].scene.traverse(function(obj) {
    obj.material = new v3d.MeshBasicMaterial({
        color: new v3d.Color(Math.random(), Math.random(), Math.random())
    });
});

– this replaces all materials in the scene with the Basic material with no textures (or you can do that only for materials you need to test performance of). If there’s no performance gain even when using Basic, then there won’t be any when using an optimized material with everything baked into a single texture.

Hope this helps!

I am also getting similiar problem where where ‘requestAnimationFrame’ takes around 5 seconds.

[Violation] 'requestAnimationFrame' handler took 4915ms

This 5 second break is right after loading finishes and before scene is shown.

Any ideas?

v3d.apps[0].printPerformanceInfo() prints next values:

Scene Loading Time: 2107ms
FPS: 4
Render Calls: 1626
Triangles Rendered: 1146454
Geometry Buffers: 59
HDR Rendering: no
Viewport Resolution: 727x1271
Pixel Ratio: 1 (current) / 1 (device)
Image-Based Lighting: PMREM 512px
Lights: 12
Post-Processing: N/A
Shadow Map: PCF (Poisson Disk) 12x 1024x1024
Materials and Shaders:
    System Material - MeshDistanceMaterial - 33ms
    System Material - MeshDistanceMaterial - 33ms
     System Material - MeshDistanceMaterial - 2.5ms
     Pergola_roof_material - MeshNodeMaterial - 1.4ms
     StoneFlour - MeshNodeMaterial - 0.8ms
     wall - MeshNodeMaterial - 0.7ms
     System Material - MeshDistanceMaterial - 0.4ms
     PoleMaterial2,PoleMaterial4,PoleMaterial6,PoleMaterial8,PoleMaterial9 - MeshNodeMaterial - 0.4ms
     v3d_default_material - MeshNodeMaterial - 0.4ms
     System Material - MeshDepthMaterial - 0.2ms
     PoleMaterial3,PoleMaterial5 - MeshNodeMaterial - 0.1ms
     System Material - MeshStandardMaterial - 0.1ms
     wire_214229166 - MeshNodeMaterial - 0.1ms
     System Material - MeshDistanceMaterial - 0.1ms
     PoleMaterial7 - MeshNodeMaterial - 0.1ms
2 x     System Material - MeshDepthMaterial - 0ms
     White Background - MeshNodeMaterial - 0ms
     System Material - MeshDepthMaterial - 0ms
     Verge3D_Environment_World - MeshNodeMaterial - 0ms
     System Material - SphericalGaussianBlur - 0ms
     zip_material_color_P3_P4,zip_material_color_P1_P3,zip_material_color_P2_P4,slide_frame_material.002,slide_frame_material.005,slide_frame_material.006,slide_frame_material.007 - MeshNodeMaterial - 0ms
     PoleMaterial1.001 - MeshNodeMaterial - 0ms
     Pergola.048,Pergola.047,Pergola.046,Pergola.045,Pergola.044,Led.043,Pergola.042,Pergola.041,Pergola_roof_material,Pergola.039,Pergola.038,Pergola.027,Pergola.026,Pergola.025,Pergola.024,Pergola.023,Pergola.022,Pergola.021,Pergola.020,Pergola.019,Pergola.002,Pergola.028,Pergola.029,Pergola.030,Pergola.031,Pergola.032,Pergola.033,Pergola.034,Pergola.035,Pergola.036,Pergola.037,PoleMaterial1.001,PoleMaterial1,PoleMaterial1.003,PoleMaterial1.002,PoleMaterial4.002,PoleMaterial4.003,PoleMaterial4.004,PoleMaterial4.005,PoleMaterial4.006,PoleMaterial4.007,PoleMaterial4.008,PoleMaterial4.009,PoleMaterial4.010,PoleMaterial4.011,PoleMaterial4.012,PoleMaterial4.013,PoleMaterial4.014,PoleMaterial4.015,zip_material_p1_p2_3,zip_material_p1_p2_2,zip_material_p1_p2_1,water_supply_material,power_supply_material,motor_material,Led.026,zip_material_p1_p2_2.001 - MeshNodeMaterial - 0ms
3 x     PoleMaterial1.001 - MeshNodeMaterial - 0ms
     zip_material_color_P1_P2 - MeshNodeMaterial - 0ms
     wall - MeshNodeMaterial - 0ms
     glass - MeshNodeMaterial - 0ms
     zip_material - MeshNodeMaterial - 0ms
     slide_bar_material.040 - MeshNodeMaterial - 0ms
     slide_bar_material.043 - MeshNodeMaterial - 0ms
     slide_bar_material.044 - MeshNodeMaterial - 0ms
     slide_bar_material.045 - MeshNodeMaterial - 0ms
 Total Render Time: 40.2ms
 Textures & Render Buffers: 15
     Wall texture.jpg - Texture - 1380x863
     kamenje.jpg - Texture - 580x582
2 x     N/A - Texture - 64x64
     Sun.shadowMap - WebGLRenderTarget - 4096x4096
     Area.002.shadowMap - WebGLRenderTarget - 4096x2048
     Area.003.shadowMap - WebGLRenderTarget - 4096x2048
     Area.004.shadowMap - WebGLRenderTarget - 4096x2048
     Area.005.shadowMap - WebGLRenderTarget - 4096x2048
     Area.006.shadowMap - WebGLRenderTarget - 4096x2048
     Area.007.shadowMap - WebGLRenderTarget - 4096x2048
     PMREM.cubeUv - WebGLRenderTarget - 1536x1536
     N/A - WebGLRenderTarget - 1024x1024
2 x     N/A - WebGLRenderTarget - 512x512