Recreating Real-World Terrain With React, Three.js & WebGL Shaders

 By GeekyAnts Tech Blog - 2021-03-03

Description

Flight Simulator, Heard Of It? You might know about Microsoft's Flight Simulator release in August last year and like me, if you're interested in flight simulators or photorealistic recreations of rea

Summary

  • Flight Simulator, Heard Of It?
  • First, we'll modify the flat plane we drew earlier so that it has the shape of the terrain.
  • Mapping The Terrain Height In many cases, the easiest way to describe something is with a picture.
  • We'll make a vertex shader that takes the red component (the R in RGBA) of each pixel of the heightmap and combines it with a scaling factor to decide the height of each point above the X-Z plane (the plane our terrain lies in).

 

Topics

  1. Frontend (0.35)
  2. Backend (0.22)
  3. Database (0.11)

Similar Articles

Creating beautiful maps with Python

By Medium - 2021-01-31

I always liked city maps and a few weeks ago I decided to build my own artistic versions of it. After googling a little bit I discovered this incredible tutorial written by Frank Ceballos. It is a…

A Complete Guide to Flexbox

By CSS-Tricks - 2020-12-03

Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and ...

Sentiment Analysis With Long Sequences

By Medium - 2021-03-10

Sentiment analysis is typically limited by the length of text that can be processed by transformer models like BERT. We will learn how to work around this.

Home

By fast - 2020-08-21

Making neural nets uncool again