Design a Voxel Rendering Engine for iOS - iOSConf.SG 2017

Design a Voxel Rendering Engine for iOS.

Transcript

1. Design a Voxel Rendering
   Engine for iOS
   Shipeng Xu
   20 Oct 2017
   @1991bill
   

   View Slide

2. What is Voxel?
   ● Volume Pixel
   ● Data Structure
   ○ Integral X, Y, Z coordinates
   ○ Color
   Pokemon Voxel, Playiku, 2016
   

   View Slide

3. View Slide

4. Voxel Rendering Engine for iOS
   ● Rendering
   ○ Beautiful
   ● Performance
   ○ Blocks can be added or removed at interactive speeds
   ○ E.g. A 64x64x64 voxel world = 262,144 voxels!
   Add Delete Move
   Change Color
   

   View Slide

5. Rendering - 1 Voxel
   12 Triangles
   

   View Slide

6. Rendering - 5,911 Voxels
   

   View Slide

7. Rendering - Meshing
   ● Naive way...
   ● Draw a 3D cube for each voxel.
   ○ 5,911 Voxels
   ○ 5,911 x 12 = 70,932 triangles
   

   View Slide

8. Rendering - Meshing
   ● Skip the unseen voxels
   ○ Before: 5,911 Voxels
   ■ 5,911 x 12 = 70,932 triangles
   ○ After: 5,868 triangles
   ■ 8.2% of original
   

   View Slide

9. Rendering - Meshing
   

   View Slide

10. ● Combine small faces into bigger ones
    Rendering - Meshing
    280 Triangles 22 Triangles(7.9%!)
    

    View Slide

11. Rendering - Lighting
    

    View Slide

12. Rendering - Ambient Occlusion
    

    View Slide

13. Rendering - Ambient Occlusion
    Occlusion level
    3
    2
    1
    0
    

    View Slide

14. Rendering - Ambient Occlusion
    

    View Slide

15. X Basic Lighting
    X Ambient Occlusion
    ✔ Basic Lighting
    X Ambient Occlusion
    ✔ Basic Lighting
    ✔ Ambient Occlusion
    Rendering - Lighting
    

    View Slide

16. Links
    ● Voxel Meshing - https://0fps.net/category/programming/voxels/
    ● Voxel Rendering Techniques -
    https://medium.com/@fogleman/voxel-rendering-techniques-fa8d869457
    ca
    ● Volume Rendering -
    http://bytebash.com/2012/03/opengl-volume-rendering/
    ● http://shipeng.studio
    

    View Slide