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:
-
Tiles and bulidings are scaled differently with respect to latitude;
-
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.
- 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
-
- Shadertoy Shadertoy Home Page
-
- Shadertoy to Three.js How to A general way adapting shadertoy's shader to three.js.
And also example: sdf examples, with sdf example tutorial
-
- inigo quilez home page inigo quilez home page
-
- raymatching tutorial A Tutorial by Jamie Wang
-
- Volumetric Rendering with [example](try-01/06 plasma globe.html)
-
- tom@subblue.com, Tracing a Terrain, Find distance to terrian quickly.
This source is copied in ./refrences