Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,054 views

Published on

WebGL has made great improvements over the past years. However, it still can’t provide photorealistic experiences alone. In order to provide products with the best look and feel, we decided to use server-side 3D rendering. In this session, we show you how we built our real-time 3D configurator stack using Amazon EC2 Elastic GPUs, RESTful microservices, Lambda@Edge, Amazon CloudFront and other services.

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

  1. 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. 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
  3. 3. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 3D configurators A b r i e f i n t r o d u c t i o n
  4. 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. 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
  6. 6. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Rendering on AWS
  7. 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. 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. 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. 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
  11. 11. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 3D rendering in web apps
  12. 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. 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. 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. 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. 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. 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
  18. 18. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon CloudWatch metrics
  19. 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. 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. 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. 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
  23. 23. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Make customization the new normal Photorealistic real-time 3D online configurators C u s t o m e r e x a m p l e — M Y C S
  24. 24. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. MYCS Photorealistic 3D configurators
  25. 25. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. MYCS Highly customizable furniture thanks to modularity
  26. 26. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. MYCS Short lead times
  27. 27. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. MYCS Affordable premium quality
  28. 28. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 3D configurators MYCS
  29. 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
  30. 30. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Photorealism Interactivity (server-side renderings) (client-side WebGL) vs. 3D configurators
  31. 31. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Client-side WebGL
  32. 32. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Server-side rendering
  33. 33. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Photorealism Interactivity (server-side renderings) (client-side WebGL) vs. 3D configurators
  34. 34. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Photorealism Interactivity (server-side renderings) (client-side WebGL) vs. 3D configurators
  35. 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
  36. 36. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Ray tracing MYCS
  37. 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
  38. 38. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Ray tracing
  39. 39. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS + GPU ray tracing MYCS
  40. 40. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Main challenge Rendering speed and (affordable) scalability
  41. 41. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Infrastructure v1.0
  42. 42. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Infrastructure v1.0
  43. 43. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Rendering streaming protocol
  44. 44. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Infrastructure v1.0
  45. 45. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Infrastructure v2.0
  46. 46. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Infrastructure v3.0
  47. 47. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Infrastructure v4.0 ( c u r r e n t v e r s i o n )
  48. 48. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Infrastructure v5.0 ( i n p r o g r e s s ) HTTP/2 Push
  49. 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. 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

×