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.

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

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. © 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

6. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Rendering on AWS

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

11. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
3D rendering in web apps

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

18. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Amazon CloudWatch metrics

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

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. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
MYCS
Photorealistic
3D configurators

25. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
MYCS
Highly customizable furniture
thanks to modularity

26. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
MYCS
Short lead times

27. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
MYCS
Affordable premium quality

28. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
3D configurators
MYCS

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. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Photorealism Interactivity
(server-side renderings) (client-side WebGL)
vs.
3D configurators

31. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Client-side WebGL

32. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Server-side rendering

33. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Photorealism Interactivity
(server-side renderings) (client-side WebGL)
vs.
3D configurators

34. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Photorealism Interactivity
(server-side renderings) (client-side WebGL)
vs.
3D configurators

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. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Ray tracing
MYCS

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. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Ray tracing

39. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
AWS + GPU ray tracing
MYCS

40. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Main challenge
Rendering speed and (affordable) scalability

41. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Infrastructure v1.0

42. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Infrastructure v1.0

43. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Rendering streaming protocol

44. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Infrastructure v1.0

45. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Infrastructure v2.0

46. © 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Infrastructure v3.0

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. © 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. © 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