This is an independent study of using shader in webGL with Threejs to create an interactive terrain scene.

By Yunfei Song & Zane Zhang

code code code

Proposal

We plan to build a web-based scene composed of a terrain with ups and downs and a 3D text located in the centre of the canvas. Users could type to change the content in real time and modify parameters at a sidebar to generate effects. On the surface of the terrain, we will create different abstract graphic textures using noise, SDF, math algorithms to make the appearance of the waving land. The final goal is 4 patterns at least. For each pattern, users can customize the color and details of the patterns by modifying the parameters with sliders on the sidebar.

👈 sketch

Documentation

1. Create the Terrain

👈Use noise in vertex shader to create the terrain.

The challenge was joining the geometry data provided by Three.js and the shader code together.

👈 made by accident

👈enjoy the inperfection

⬆️ We used SDF + vertexShader to create a flat area in the center of the terrain.

• code

2. Add light

👈 use custom shader code to add lighting effect