{"id":19867517,"url":"https://github.com/erkaman/gl-rock","last_synced_at":"2025-08-21T01:05:58.295Z","repository":{"id":141382792,"uuid":"57905258","full_name":"Erkaman/gl-rock","owner":"Erkaman","description":"Procedural Generation of Rocks in WebGL","archived":false,"fork":false,"pushed_at":"2016-06-17T10:34:12.000Z","size":7904,"stargazers_count":103,"open_issues_count":0,"forks_count":5,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-08-21T01:03:18.971Z","etag":null,"topics":["demo","glsl","javascript","procedural","procedural-generation","rock","webgl"],"latest_commit_sha":null,"homepage":"http://erkaman.github.io/gl-rock/example/index1.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Erkaman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-05-02T16:51:04.000Z","updated_at":"2025-03-09T17:01:51.000Z","dependencies_parsed_at":null,"dependency_job_id":"268837e4-d78e-4ccf-b989-6fbabd668856","html_url":"https://github.com/Erkaman/gl-rock","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Erkaman/gl-rock","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Erkaman%2Fgl-rock","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Erkaman%2Fgl-rock/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Erkaman%2Fgl-rock/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Erkaman%2Fgl-rock/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Erkaman","download_url":"https://codeload.github.com/Erkaman/gl-rock/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Erkaman%2Fgl-rock/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271410635,"owners_count":24754757,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-20T02:00:09.606Z","response_time":69,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["demo","glsl","javascript","procedural","procedural-generation","rock","webgl"],"created_at":"2024-11-12T15:29:32.660Z","updated_at":"2025-08-21T01:05:58.241Z","avatar_url":"https://github.com/Erkaman.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Procedural Rock Generation using WebGL\n\nIn this project, a simple technique for procedurally generating rocks is showcased.\n\n![1000rocks](images/1000rocks.png)\n\n## Demo\n\nTwo demos of the technique are provided.\n\n* [Rock Editor](http://erkaman.github.io/gl-rock/example/index1.html)\n* [1000 Rocks](http://erkaman.github.io/gl-rock/example/index2.html)\n\n**Note that the second demo will be very taxing on lower-end GPUs!** A [Video](https://www.youtube.com/watch?v=PX9lU_IqcT4) is provided in case your GPU is too weak.\n\n### 1000 Rocks\n\nThe camera in the demo is controlled as follows:\n\n* Keys `W` and `S` are used to walk forward and backward.\n* Keys `A` and `D` are used to stride left and right.\n* Keys `O` and `L` are used to fly up and down.\n* Hold down the key `M` to speed up the camera.\n* Hold down the left mouse button and move the mouse to turn the camera.\n\n\n### Rock Editor\n\nIf you are modifying the mesh parameters(The \"edit mode\" is \"mesh\"), then the mesh will not update real-time. You must click the button \"Update Rock\", or the keyboard key \"P\", in order to update the rock. \n\nNext, we explain some parameters of the rock editor. For more details on these parameters, see the  [Explanation](https://github.com/Erkaman/gl-rock#explanation) \n\n* `Noise Scale` controls the scale of the noise that is applied after all the scraping has been done.\n* `Noise Strength` controls the strength(amplitude) of the above noise.\n* `Scrape Count` controls how many times the mesh is scraped(flattened)\n* `Scrape Min Dist` The minimum distance between all the randomly selected spots that are scraped.\n* `Scrape Radius`.  Randomly selected spot are selected for scraping. All vertices that are within the distance `Scrape Radius` from that spot are also affected by the scraping.\n* `Scrape Strength` How deeply we should scrape.\n\n\n\n\n\n## Explanation.\n\nIn this section, our technique for procedurally generating rocks is outlined.\n\nThe general idea is simple: If you look at rocks in nature, you will notice that they are round at some places, and flat at other places. We can reproduce this shape by first starting with a sphere mesh:\n\n\u003cimg src=\"images/c1.png\" width=\"300\" height=\"300\" /\u003e\n\nand then randomly scraping off parts(flattening) off this mesh, while leaving other parts untouched:\n\n\u003cimg src=\"images/c2.png\" width=\"300\" height=\"300\" /\u003e\n\nThis is easy to implement. To randomly scrape some part of the sphere, we first randomly define a plane:\n\n\u003cimg src=\"images/c3.png\" width=\"300\" height=\"300\" /\u003e\n\nNow, all vertices that are on one side of the plane are left untouched, but the vertices on the other side are projected onto the plane:\n\n\u003cimg src=\"images/c4.png\" width=\"300\" height=\"300\" /\u003e\n\nAnd we can easily project vertices onto a plane by using some elementary linear algebra. \n\nBut by using this approach, we cannot create concave rocks. However, by slightly modifying the approach, we can do this as well. Instead of defining a plane in 3D space, we define a circular disk in 3D space:\n\n\u003cimg src=\"images/c5.png\" width=\"300\" height=\"300\" /\u003e\n\nJust like before, we now project all vertices under this disk onto the disk. However, we make sure that all vertices that are too far from the center of the disk are left untouched. By doing this, the vertices are projected onto a disk, and we are thus able to create concave rocks:\n\n\u003cimg src=\"images/c6.png\" width=\"300\" height=\"300\" /\u003e\n\n\nFor more details, see the source code in `example/scrape.js`.\n\n\n\nOnce we have randomly scraped the sphere mesh, we use a Perlin noise to randomly distort the vertices a little bit. Finally, the rock texture is then generated with a Perlin noise in a fragment shader. This means that we are basically generating the texture in real time, which, unfortunately, also means that it is very taxing to render the rock on lower-end GPUs.\n\n## Build\n\nTo run the demos locally on your computer, first change your directory to the directory of the project, then run\n\n```bash\nnpm install\n```\n\nTo then run demo 1, do this:\n\n```bash\nnpm run demo1\n```\n\nand the demo will automatically open in a tab in your browser.\n\nTo run demo 2, do this:\n\n```bash\nnpm run demo2\n```\n\n\n## TODO\n\n* It would be nice if the generated rocks could be exported to some external format such as `.ply` or `.obj`.\n* Add Ambient Occlusion.\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferkaman%2Fgl-rock","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ferkaman%2Fgl-rock","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferkaman%2Fgl-rock/lists"}