Challenge Overview
Summary
The quick and dirty summary:
What's needed: A Raspberry Pi B+ optimized version of our WebGL / React codebase and demo app that maintains at least 24 FPS when being used
What this is: An interesting little proof of concept that is targeting the Raspberry Pi with some new GUI elements defined in HTML and ReactJS, using WebGL.
Note: You do not need a Raspberry Pi B+ to compete in this challenge, but it would be helpful if you already have one. If you do not have one, you can get feedback on your submission on the platform by submitting in OR and the copilot will run your submission and let you know how it performs through the forum.
Overview
The Horizon Vault 2.0 is a set of components that uses the React library (http://facebook.github.io/react/) for defining the user interface of a television-based UI. This code is being used as a proof of concept to show React based components running in HTML on a Raspberry Pi B+ embedded system. The current library implementation targets WebGL and a few basic components, specifically a single canvas, rectangles (quads), text, and images.
Problem Description
We have a proof of concept UI that is based on an existing client system. This existing system is provided in the forum.
The goal for the proof of concept so far has to been to build a very simplified version of the existing test UI that can run on the Raspberry Pi B+, using the React components we previously built. This implementation is done, and now it needs to be optimized.
A sample OS image for the Raspberry Pi and deployment instructions are provided in the forum. Deployment is very straightforward.
Challenge Objective
The goal for this challenge is to optimize the proof of concept so that it runs at a high constant framerate on the Raspberry Pi B+. We would like to see 30 FPS, but 20 FPS is the absolute minimum. Right now it gets between 7 and 15 FPS. This includes FPS while animating! One major goal is to make sure animations are smooth, for the best user experience.
NOTE: Only submissions that show at least 20 frames per second (FPS) on the Raspberry Pi B+ will be eligible for prizes, unless the client chooses a discretionary prize.
Optimizations include:
1. Caching as much as possible and reuse shaders and other elements wherever possible
2. Only drawing what is in the bounds of the screen
3. Agressive drawing of only visible pixels - if something is behind another, opaque element, only the front pixels would be rendered.
4. Update the definition of the proof of concept to be leaner. It's important that the proof of concept keep the same general layout for the row and cell definitions so the code is still readable.
5. Anything else you think would help. Use your imagination!
There is information here on how to measure the GPU memory used on the Raspberry Pi. Please use this to ensure that GPU memory is used properly and isn't being overloaded:
https://www.raspberrypi.org/forums/viewtopic.php?f=67&t=23185
Requirements
For this proof of concept, there are strict requirements about how the drawing can be done. The rendering output should use an immediate mode model: everything in the hierarchy must be re-rendered every frame by clearing the WebGL buffer before drawing. This is a client requirement.
You can update anything in the codebase as long as the requirements above are met and the existing functionality remains intact and works correctly.
NOTE: Only submissions that show at least 20 frames per second (FPS) on the Raspberry Pi B+ will be eligible for prizes, unless the client chooses a discretionary prize.
Current Proof of Concept structure
The current proof of concept defines rows and cells for the navigation, basically a structured heirarchy of components to define the UI. You should not change this formal heirarchical component structure. The goal is to clearly and succinctly define the UI this way, and it was a client requirement. If the requirements are impossible to implement due to an issue with this heirarchy, please post in the forum or email the copilot directly and we can figure something out.
Code
The current codebase is in Gitlab here: https://gitlab.com/katynp/tchorizon There is a README describing how to build and host the code locally, as well as documentation on how to install the Raspberry Pi image and connect it to the codebase hosted on your development computer. The README also has links to the Raspberry Pi image file and deployment instructions.
Please post your Gitlab USERNAME in the forum for access. You must provide your username, not an email address or something else. If you get a 404 error when accessing the URL above, it means you do not have access. Note that providing access is a manual process and can take up to 12 hours to be processed. You will receive an email from Gitlab once access is granted.
Submission
For your submission, please submit two files:
1. A guide describing your optimizations
2. A patch file that can be applied to the checked out code
Here is documentation on how to generate a Git patch file:
https://ariejan.net/2009/10/26/how-to-create-and-apply-a-patch-with-git/
Judging Criteria
The winner will be chosen by the best performing submission that meets the requirements. If two or more submissions have similar performance and meet the requirements, a winner will be chosen by the client.
Final Submission Guidelines
Please see above