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

Pebble Cloud IDE

https://cloudpebble.net

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