Create a 3D game engine for Pebble watch, so that 3D games for Pebble could be built easier.

1. Create a 3D Game
Engine for Pebble
Shipeng Xu
29 Oct 2016
http://BillHsu.github.io

2. my facebook,
yesterday morning

3. What we need to do..
• Generic way of rendering 3D images for Pebble
• Flexible
• High frame rates

5. 6096 vertices

7. Pebble Time Specs

8. Display
• 64-color epaper, always on
• Resolution: 144x168
• Pixel density: 182 ppi
From https://www.ifixit.com/Teardown/Pebble+Time+Teardown/42382

9. Processors/Wireless
• ST Micro STM32F439ZG 180 MHz ARM
• Speed limited to 100 MHz imposed
• Texas Instruments CC2564B Bluetooth
Module
• Lattice LP1K FPGA(!)
• No GPU/Graphic Card
From https://www.ifixit.com/Teardown/Pebble+Time+Teardown/42382

10. Pebble Development

11. Pebble APIs
• Watch side APIs
• C API
• JavaScript API(via JerryScript)
• Phone side APIs
• PebbleKit JS
• PebbleKit iOS
• PebbleKit Android

12. Pebble Cloud IDE
https://cloudpebble.net

13. Let’s design the 3D
game engine for Pebble!

14. Review our goals
• Generic way of rendering 3D images for Pebble
• Flexible
• High frame rates

15. Two ways
• Phone side rendering
• Render image on phone
• Send the image over to watch to display
• Watch side rendering
• Send the 3D vertices to watch
• Rendering done on the watch side

16. Phone Side Rendering

17. Send image to
watch via
Bluetooth
Phone renders
the 3D image
Watch will display
the image
from phone
123

18. Pebble Display
144 px
168 px
A R G B
Bits 2 2 2 2

19. Pebble Display
• Each pixel will take 1 byte(8 bits)
• 2 bit alpha(not been used)
• 2 bit red, 2 bit green, 2 bit blue
• Display resolution 144x168
• One frame will take..
• 144x168 = 24192 Bytes = 23.625 KB

20. Pebble Bluetooth
Texas Instruments CC2564B
Bluetooth and Dual-Mode Controller
Bluetooth 2.1 (default, max data rate: 3 Mbps.),
Bluetooth 4.0 (iOS7+ uses LE for Notifications)

21. Pebble Bluetooth
• 3 Mbps ~= 360 KB per second
• One image frame will take..
• 144x168 = 24192 Bytes = 23.625 KB
• We can get more than 10 frames per second!

22. If message size is more than ~1.8 KB..

23. Send a 144x168 image
Due to PebbleOS’s limitation, a single frame
needs to call sendAppMessage 14 times…

24. 3D Rendering

25. PebbleKit JS
• WebSockets
• XMLHttpRequest
• Geolocation
• LocalStorage
• No WebGL :( …

26. Triangles!

28. Rasterisation

29. Graphics Pipeline

30. A 3D renderer in JavaScript
https://github.com/billhsu/renderer.js
https://www.youtube.com/watch?
v=pUKUM6oUYNM
(Thanks engineers.sg)

31. Performance
3D rendering Sending buffer
Time 0.24 sec 8.46 sec
Tested on iPhone 6S with iOS 10.1
and Pebble Time with Firmware version 4.2.0

32. Reduce image resolution
• Originally 144x168
• Reduce to 36x42
• 36 * 42 = 1512
• Less than 1.8KB (Yay!)
• Image could be sent in one message

34. Performance with reduced
image resolution
3D rendering Sending buffer
Time 0.13 sec 0.41 sec
Tested on iPhone 6S with iOS 10.1
and Pebble Time with Firmware version 4.2.0

37. Watch Side Rendering
• Frame rate should be better
• Geometry limitation
• JerryScript may not work

38. Summary
• [√] Generic way of rendering 3D images for Pebble
• [√] Flexible
• [?] High frame rates

39. Thanks!
• http://BillHsu.github.io/
• https://github.com/billhsu/pebble3d