Create a 3D Game Engine for Pebble
Shipeng Xu 29 Oct 2016
http://BillHsu.github.io
my facebook, yesterday morning
What we need to do..
• Generic way of rendering 3D images for Pebble
• Flexible
• High frame rates
6096 vertices
Pebble Time Specs
Display
• 64-color epaper, always on
• Resolution: 144x168
• Pixel density: 182 ppi
From https://www.ifixit.com/Teardown/Pebble+Time+Teardown/42382
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
Pebble Development
Pebble APIs• Watch side APIs
• C API
• JavaScript API(via JerryScript)
• Phone side APIs
• PebbleKit JS
• PebbleKit iOS
• PebbleKit Android
Let’s design the 3D game engine for Pebble!
Review our goals
• Generic way of rendering 3D images for Pebble
• Flexible
• High frame rates
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
Phone Side Rendering
Send image to watch via Bluetooth
Phone renders the 3D image
Watch will display the image from phone
123
Pebble Display
144 px
168 px
A R G BBits 2 2 2 2
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
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)
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!
If message size is more than ~1.8 KB..
Send a 144x168 image
Due to PebbleOS’s limitation, a single frame needs to call sendAppMessage 14 times…
3D Rendering
PebbleKit JS• WebSockets
• XMLHttpRequest
• Geolocation
• LocalStorage
• No WebGL :( …
Triangles!
Rasterisation
Graphics Pipeline
A 3D renderer in JavaScript
https://github.com/billhsu/renderer.js
https://www.youtube.com/watch?v=pUKUM6oUYNM
(Thanks engineers.sg)
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
Reduce image resolution
• Originally 144x168
• Reduce to 36x42
• 36 * 42 = 1512
• Less than 1.8KB (Yay!)
• Image could be sent in one message
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
Watch Side Rendering
• Frame rate should be better
• Geometry limitation
• JerryScript may not work
Summary
• [√] Generic way of rendering 3D images for Pebble
• [√] Flexible
• [?] High frame rates
Thanks!
• http://BillHsu.github.io/
• https://github.com/billhsu/pebble3d
Top Related