GOAL: PlanetTechJS is an open-source JavaScript library built using vanilla THREE.js, accompanied by a React UI for editing planets. Its primary purpose is to generate procedural planets and terrains using a quadtree LOD approach. The aim of this project is not to replicate titles like Star Citizen or No Man's Sky, but rather to provide a toolkit that emulates the tools they might employ for planet creation. The sole focus is on crafting planets, offering a straightforward and adaptable approach to designing realistic and visually captivating 3D planets on a grand scale. The key to the success of this project lies in its ability to handle scale, allowing for seamless transitions from the sky to the ground with high resolution. PlanetTechJS will include customizable features such as terrain textures, ground physics, atmospheric effects, and more. Thus, it does not encompass spaceships, weapons, player dynamics, etc.; its sole focus is planet generation.
What sets this library apart is its utilization of the GPU for all tasks. This includes generating textures for each facet, performing displacement, and shaping PlaneGeometries into spherical forms; the entire process occurs on the GPU. Consequently, there is no need for WebWorkers at this stage.
Download and run the project. Go to http://localhost:3001/. The file for the demo is located at src/lib/viewGL.js. If things aren't working, open an issue, and I will try to correct any problems.
- Procedural planet generation: Create unique and realistic planets using procedural algorithms.
- flexability and speed.
- quadtree sphere.
- CDLOD. (coming soon)
- custom frustum culling. (coming soon)
- raycasting mannequin. (coming soon)
- cubeMap. (threading and instancing coming soon)
- Terrain generation: Generate detailed and customizable terrains with different types of landscapes such as mountains, valleys, and plains.
- Texture mapping: Apply textures to the terrain to enhance visual realism and add visual variety.(coming soon)
- Gpu generated normal map.
- Gpu generated displacement map.
- Atmospheric effects: Simulate atmospheric effects such as clouds, haze, and lighting to create a more immersive environment.(dev complete)
- day and night cycle.(coming soon)
- weather simulation.(coming soon)
- Texture editing / terrain editing. (coming soon)
- Texture Atlas. (dev complete)
- Texture channel packing.(dev complete)
- Texture Splat Map.(dev complete)
- Physics. (coming soon)
- assets. (coming soon)
- foliage. (coming soon)
- ability to switch from WebGL to WebGPU backended. (dev complete)
- logs.
- Recommended GPU is GTX 1060 and above.
The PlanetTechJS repository contains two libraries: PlanetTech itself and CubeMap. Both PlanetTech and CubeMap are built using ThreeJS experimental NodeMaterial.
Additionally, PlanetTech requires you to use the render object. With the render object, you can switch between the WebGL: render.WebGLRenderer(canvasViewPort) and WebGPU: render.WebGPURenderer(canvasViewPort). You should stick with WebGL because WebGPU is still very experimental in ThreeJS and can cause issues with each version update.
-
PlanetTech: Think of it as the backend. It handles planet system management, mesh creation, as well as the generation of quads and quadtree data structures from the
'./PlanetTech/engine'. -
CubeMap: This serves as the frontend and primarily handles texture generation.
-
WorldSpace: WorldSpace is a post-processing shader that acts as our scene and serves as an abstraction for the space. It handles all the attributes for space in PlanetTechJS, including atmospheric scattering, volumetric lighting, fog, and more. If you need to add a post-processing to the scene use this class.
We will start with PlanetTech. Let's create a basic quadtree sphere without any textures or displacement, just coloring each dimension to show what's going on under the hood. Let's create a basic quadtree sphere without any textures or displacement, just coloring each dimension to show what's going on under the hood.
let cubeUrls = [
new URL('./textuers/color/right_color_image.png', window.location.origin).href,
new URL('./textuers/color/left_c
494D
olor_image.png', window.location.origin).href,
new URL('./textuers/color/top_color_image.png', window.location.origin).href,
new URL('./textuers/color/bottom_color_image.png',window.location.origin).href,
new URL('./textuers/color/front_color_image.png', window.location.origin).href,
new URL('./textuers/color/back_color_image.png' , window.location.origin).href
]
const texture = new THREE.CubeTextureLoader().load( cubeUrls )
const cubetexture = cubeTexture(texture,THREE.positionLocal)
let planet = new Planet()
planet.initSphere({
offset:1/1.5 ,
levels:6,
size:15,
radius:15,
resolution:10,
dimension:5
})
planet.primitive.infrastructure.config.material.colorNode = cubetexture
planet.setEvents ('afterMeshCreation',[(node)=>{/*do something*/ }])
planet.setEvents ('loadTexture',[(node)=>{/*do something*/}])
planet.setEvents ('afterSpatialNodeCreation',[(node)=>{ node.add(box3Mesh(node.boundingInfo.boundingBox,new THREE.Color( Math.random() * 0xffffff ))) }])
planet.create()
scene.add( planet )