About

Shader-demo is a Glsl shader testing and visual effects lib.

This is a temp repo for now. The js lib distribution will using Webpack in the future. For now, there is a helping tool, cp-res, in shader-demo/lib directory for copying necessary files. Users need modify the "src" array to indicate their git location, then copy files to their application/oz dir.

The bash script is only can be used in linux.

The shadertoy and raymatching is some how different from the well known style of 3d rendering, see [2].

This repository is a testing project using three.js for running shaders from shadertoy in a html file, independent to shadertoy.

Here are some of the results:

• basic raymatching shape

Try the different algorithms in [3].

• platonic solids

Shapes melding, because of power of "mix()".

• volumetric rendering example

• data texture

• geojson model, GPU pick

• dynamic points

• OSM axis convertion

• OSM 3D Bulidings Hacked

Hacking Memo:

1. Tiles and bulidings are scaled differently with respect to latitude;

2. Using web workers to handling data tasks asynchronously, scheduled by a manager class - Grid;

• Grid#update() are peroidically called and visible tiles are collected;

• Data access tasks are queued by Grid#update();

• When tiles are the case of GeoJSON, tasks will create new Features, which in turn will load geojson data;

• When geojson data loaded, it post message to another worker, feature/worker.js, which will convert geojson (mainly polygons) into webgl compitable data, in method feature/worker.js#processGeoJSON();

• The final model will be rendered by Feature#onload() in a cascading way, for performance reason.

3. A bulding can be represented by multi geojson features and height is from the level property, with each floor height = 3m.

Quick Start

git clone https://github.com/odys-z/shader-demo.git

Then open index.html with browser. Edge is recommended because you can load local files, the others like Firefox or Chrome will report CROS error.

Troubleshootings:

Chrome CROS Blocked

If Chrome is reporting CROS error, that's because you opened the html file from file system and it's trying to load a local file. Chrome doesn't allow this access by default. So in Ubuntu:

google-chrome --allow-file-access-from-files --allow-file-access --allow-cross-origin-auth-prompt

Windows has the similar shooting.

see Stackovrflow: Problems with jQuery getJSON using local files in Chrome;

and chrome support

References

try-01 and try-02

• 1. Shadertoy Shadertoy Home Page
• 2. Shadertoy to Three.js How to A general way adapting shadertoy's shader to three.js.
• 3. Three.js Backgrounds and Skyboxes
• 4. Raymarching distance functions and ** primatives **

And also example: sdf examples, with sdf example tutorial

• 5. inigo quilez home page inigo quilez home page
• 6. raymatching tutorial A Tutorial by Jamie Wang
• 7. Volumetric Rendering with [example](try-01/06 plasma globe.html)
• 8. tom@subblue.com, Tracing a Terrain, Find distance to terrian quickly.

This source is copied in ./refrences

• 9. An advanced rendering tech survey

Resources

Three.js & Shadertoy

• 1. Three.js Fundamentals
• 2. Inigo Quilez, Graphtoy
• 3. stackgl/glsl-transpiler and jarble Universal-transpiler
• 4. TyphoonLabs' OpenGL Shader Designer
• 5. Brian Burg, Sophia WangGLSL, Js Translator / Debugger,
• 6. Inigo Quilez's website

OSM, Mapbox, etc.

• 1. OSM 3D Buildings
• 2. OSM 3D wiki
• 3. Mapbox Vector tiles
• 4. geojson.io
• 5. F4 Map Demo
• 6. Google Desgin, Prototyping a Smoother Map, A glimpse into how Google Maps works

Basic 3D Algorithms

• 1. Geometric Tools
• 2. Ray Tracing Resources Page, (Gems, Static Intersection, etc.)