Code Monkey home page Code Monkey logo

bryce-from-nyce's Introduction

Bryce from Nyce

Bryce-like Fractal Terrain Generator

What

It's a 3D terrain editor. Currently, only the Diamond-Square algorithm is implemented.

Screenshot

How

Stack

It runs with ECMAScript, served by Bun, built on Hono, rendered with BabylonJS, reactived with AlpineJS, designed with PicoCSS and containerized with Docker.

No JSX nor hooks were harmed in the process.

This webapp is conveniently dockerized, to run it, simply clone this repo and launch :

$ docker compose up

And launch the browser to access to http://localhost:3000

Of course, if you know how to use Bun, you can simply launch :

$ bun run index.js

What is special about this implementation of Diamond-Square algorithm ?

Two points : unlike many implementions of this algorithm you can find on the net, this release is divided into steps. Each step adds more refinement to the mesh and you can increase or decrease this tesselation afterward generating the terrain.

The second point is the texturing algorithm that uses 3 textures (top, bottom and slope) that are mixed according to height and slope of the terrain. The slope texture is visible when the terrain is steep.

With the help of transfer functions and convolution matrices, you can rapidly generate realist terrains.

API

  • src/Terrain.js : all mathematical stuff
  • src/editor.js : all 3d stuff
  • src/TransferFunction.js : transfer function object to be applied on Terrain objects
  • template/index.html : the page
  • texture/ : default textures

TODO (from probable to improbable)

  • Fog
  • Skybox
  • Exporting the scene
  • Managing a camera on the terrain
  • Exporting a screenshot
  • Undo - need to refactor TransferFunction and convolutions workflow
  • Other algorithms for generating terrains
  • Other algorithms for generating texturing
  • Procedural mapping like original Bryce with pixel shaders ?
  • Other primitives into the scene ?

bryce-from-nyce's People

Contributors

trismegiste avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.