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

Transcript

1. Design a Voxel Rendering Engine for iOS Shipeng Xu 20

   Oct 2017 @1991bill

2. What is Voxel? • Volume Pixel • Data Structure ◦

   Integral X, Y, Z coordinates ◦ Color Pokemon Voxel, Playiku, 2016
3. None

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

5. Rendering - 1 Voxel 12 Triangles

6. Rendering - 5,911 Voxels

7. Rendering - Meshing • Naive way... • Draw a 3D

   cube for each voxel. ◦ 5,911 Voxels ◦ 5,911 x 12 = 70,932 triangles

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

9. Rendering - Meshing

10. • Combine small faces into bigger ones Rendering - Meshing

    280 Triangles 22 Triangles(7.9%!)

11. Rendering - Lighting

12. Rendering - Ambient Occlusion

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

14. Rendering - Ambient Occlusion

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

    Ambient Occlusion ✔ Basic Lighting ✔ Ambient Occlusion Rendering - Lighting

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