Skip to content

Latest commit

 

History

History
 
 

tiled-renderer

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
fonts
fonts
 
 
images
images
 
 
src
src
 
 
stylesheets
stylesheets
 
 
.gitignore
.gitignore
 
 
README.md
README.md
 
 
app.yaml
app.yaml
 
 
chapter.md
chapter.md
 
 
index.html
index.html
 
 
index.py
index.py
 
 

README.md

A Tiled Renderer

Author: Pierre-Antoine LaFayette [email protected]

Requirements

  • A modern browser that supports WebGL and a compatible GPU
  • Because of the WebGL security policy on loading images from file:/// URLs, if you want to run locally, you have two options:
    1. Run a local server from the command line by changing to the tiled-renderer directory and executing: python3 -m http.server. This is the recommended approach. Use python -m SimpleHTTPServer on Python 2.x.
    2. Temporarily turn off the same origin policy on your browser. On Chrome this can be done with the command line flag --disable-web-security. Please remember to remove the flag for normal browsing as this is a security risk.
  • If the demo still fails to load, you may need to disable ad blocking extensions in your browser as they may interfere with the loading of the required scripts.

Abstract

This project will demonstrate how modern browsers use backing stores to implement features such as smooth scrolling and zooming. The renderer is a tile based renderer written in JavaScript using WebGL. The renderer uses the GPU for rasterization through render-to-texture. In this chapter, we'll discuss the benefits of a backing store, tiling, GPU vs CPU rasterization, zooming, and progressive rendering.

Usage

There is a live version running at: http://tiled-renderer.appspot.com

On a Mac:

cd ~/500lines/tiled-renderer
python3 -m http.server &
open http://localhost:8000