Building a Photorealistic Real-Time 3D Configurator with Server-Side Renderings on AWS - ARC405 - re:Invent 2017

1. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. B u i l d i n g a P h o t o r e a l i s t i c R e a l - t i m e 3 D C o n f i g u r a t o r w i t h S e r v e r - s i d e R e n d e r i n g s o n A W S C l a u d i o B r e d f e l d t – C T O - M Y C S C h r i s t o p h K a s s e n – S o l u t i o n s A r c h i t e c t - A W S A R C 4 0 5 D e c e m b e r 1 , 2 0 1 7 AWS re:INVENT

2. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. What can you expect? • Introduction to 3D configurators • Rendering on AWS • Integrate 3D into your web application • Customer story—mycs Our expectations • Knowledge of AWS services • 3D visualization basics

4. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Real-time configurators Cars, fashion, furniture... Benefits • Engage with customers • Visualize final product • Support buying decision Server-side rendering • Quality • Speed • Low cost

5. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Rasterizers • Composing vectors/polygons • OpenGL/DirectX • GPU accelerated Ray tracing • Send traces through scene • Photorealistic images • GPGPU-optimized • CUDA or OpenCL 3D rendering Image View ray Shadow ray Camera Light source Scene object

7. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. P3 1-8 GPUs NVIDIA Tesla V100 Volta architecture 1x GPU core 5,120 CUDA cores, 640 tensor cores 16 GB HBM2 Intel Xeon E5-2686 v4 (Broadwell) ENA adapter G3 1-4 GPUs NVIDIA Tesla M60 Maxwell architecture 2x GPU cores 4096 CUDA cores 16 GB GDDR5 Intel Xeon E5-2686 v4 (Broadwell) ENA adapter AWS GPU instances

8. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Elastic GPU—key features Flexible instance size and attachment • Right-size instance selection • Utilize Auto Scaling to handle requests Windows instances only OpenGL 4.2 support • No CUDA, OpenCL, and DirectX support • Ensure application runs on OpenGL rendering

9. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Elastic GPU—operations Elastic GPU ENI consumes additional IP Rendering max. 25 fps Use GPU Caps Viewer to view OpenGL extensions Troubleshooting Display framerate C:Program FilesAmazonEC2ElasticGPUsconfeg.conf [Application] show_fps=1

10. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. How do I choose? Instance P3 Supports: OpenGL 4.5, DirectX 12.1 CUDA 9.0+, OpenCL 1.2+ G3 Supports: OpenGL 4.5, DirectX 12.0 CUDA 8.0+, OpenCL 1.2 Elastic GPU Supports: OpenGL 4.2 Use cases Machine learning Computational finance, genomics... 3D visualizations 3D rendering Video encoding.... Applications benefiting from some GPU

12. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Integrate rendering into web apps What do we need? • Rendering API • Web app/microservices • Renderer • 3D model and model configuration • Caching Other requirements • (Near) real-time rendering • High-quality rendered images

13. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Rendering Rasterizer • Unity • Amazon Lumberyard Ray tracer • Nvidia Iray, 3ds max… • Cycles (Blender) Integrate engine • Write image to file • Grab framebuffer • Utilize native integration

14. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. import bpy, _cycles print(_cycles.available_devices()) bpy.context.scene.render.engine = 'CYCLES' bpy.context.scene.cycles.device = 'GPU' bpy.context.user_preferences.addons['cycles'].preferences.compute_device_type = 'CUDA' # Larger tile sizes optimal for GPU processing bpy.context.scene.render.tile_x = 256 bpy.context.scene.render.tile_y = 256 Ray tracing with Blender Run Blender from the CLI blender -b ~/blender/model.blend -o ~/blender/tmp/ -P ~/blender/gpu_settings.py -f 1

15. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Ray tracer on GPU instances Auto-scaled services and rendering API Network Load Balancer (NLB) • Stream images with http/2 push • TCP level load-balancer Serve pre-rendered assets via CDN Caching • Utilize CloudFront caching • Rendering API • Custom caching for http/2

16. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Rasterizer with Elastic GPU Auto Scaling • Only a single fleet of instances • Instances right-sized • Elastic GPU attached Rasterizer engine, e.g. Unity Caching • Pre-rendered assets • Request contains 3D model configuration

17. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Operations Monitor GPU utilization • GPU instances use nvidia-smi to query data • Elastic GPU memory usage Custom CloudWatch metrics from rendering API Auto Scaling • Scale GPU fleet based on custom metrics • Scale up aggressively • Scale down slowly

19. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. #!/bin/bash NAMESPACE='GPU/Metrics' # Metrics namespace # Fetch GPU metrics IFS=', ' read -r -a STATS <<< `nvidia-smi --query-gpu=utilization.gpu,utilization.memory -- format=csv,nounits,noheader` # Gathering aws credential data and put it to cloudwatch export AWS_DEFAULT_REGION=`curl -s http://169.254.169.254/latest/meta-data/placement/availability- zone | sed 's/[a-z]$//'` INSTANCE_ID=`curl -s http://169.254.169.254/latest/meta-data/instance-id` # Send values to CloudWatch aws cloudwatch put-metric-data --metric-name Utilization --namespace $NAMESPACE --dimensions "InstanceId=${INSTANCE_ID}" --unit 'Percent' --value ${STATS[0]} aws cloudwatch put-metric-data --metric-name MemoryUtilization --namespace $NAMESPACE --dimensions "InstanceId=${INSTANCE_ID}" --unit 'Percent' --value ${STATS[1]} Monitor GPU instances

20. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Optimizations # Run all commands as root # Query GPU’s nvidia-smi -L # Configure the GPU settings to be persistent. nvidia-smi -pm 1 # Disable the auto boost feature for all GPUs on the instance. nvidia-smi --auto-boost-default=0 # Query clock speeds nvidia-smi -q -d SUPPORTED_CLOCKS #(P3/G3) Set GPU clock speeds to max. frequency. nvidia-smi -ac 2505,1177

21. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Redirect traffic automatically • Serve pre-generated content • Minimize impact during spikes • Safe scaling Lambda@Edge checks GPU health • Network calls on Viewer/Origin requests • 5s/30s timeout • Rewrite request Pre-rendered content

22. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. const https = require('https'); exports.handler = (event, context, callback) => { const request = event.Records[0].cf.request; // Fetch metrics from API endpoint const jsonUrl = 'https://example.com/api/metrics.json'; https.get(jsonUrl, (res) => { let content = ''; res.on('data', (chunk) => { content += chunk; }); res.on('end', () => { const apiStatus = JSON.parse(content); if (Boolean(apiStatus['config']['overloaded'])) // GPU Fleet is under high load request.uri = apiStatus['config']['redirect']; // Rewrite request callback(null, request); }); }); }; Lambda@Edge code example

29. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. What can you expect? Main challenge when building a real-time 3D online configurator • Client-side vs. server-side renderings • Ray tracing • AWS infrastructure • Lessons learned

35. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Server-side rendering ● First image arrives within 2 seconds after user interaction ● Progressive streaming of images ● High degree of interactivity ● Cross-device compatibility ● Scalable and affordable Goals ● Not optimized for real-time applications ● Low interactivity ● Steeper learning curve and setup compared to WebGL ● Expensive (GPU servers, licenses, etc.) Downsides

37. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Ray tracing Realistic simulation of lighting used to create photorealistic looking images The ray tracer is responsible for performing the necessary computations to cast shadows and light up objects. This means you can create images full of mirrors, transparent surfaces, and object shadows. Source: https://commons.wikimedia.org/wiki/File:Ray_trace_diagram.svg

49. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Lessons learned • Aim for the best possible hardware • Don’t be afraid to step deep into rendering topics • Always re-evaluate your infrastructure • Keep most of your energy on the renderer • Don’t just stick to one technology

50. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Thank you! C l a u d i o B r e d f e l d t – C T O - M Y C S C h r i s t o p h K a s s e n – S o l u t i o n s A r c h i t e c t - A W S

Building a Photorealistic Real-Time 3D Configurator with Server-Side Renderings on AWS - ARC405 - re:Invent 2017

You are reading a preview.

Check these out next

Building a Photorealistic Real-Time 3D Configurator with Server-Side Renderings on AWS - ARC405 - re:Invent 2017

More Related Content

Slideshows for you (20)

Similar to Building a Photorealistic Real-Time 3D Configurator with Server-Side Renderings on AWS - ARC405 - re:Invent 2017 (20)

More from Amazon Web Services (20)