# GodotTerrain

**Repository Path**: JetLab/godot-terrain

## Basic Information

- **Project Name**: GodotTerrain
- **Description**: 使用Godot引擎, 基于GPU的shader实现高程图＋卫星图渲染成三维地形
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-12-12
- **Last Updated**: 2023-12-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 使用Godot引擎, 基于GPU的shader实现高程图＋卫星图渲染成三维地形

<!-- TOC -->

- [1. 兼容性](#1-兼容性)
  - [1.1. 开发环境](#11-开发环境)
  - [1.2. 运行环境](#12-运行环境)
- [2. 技术实现](#2-技术实现)
- [3. 灰度图生成三维网格](#3-灰度图生成三维网格)
  - [3.1. 节点和material的创建](#31-节点和material的创建)
  - [3.2. shader代码](#32-shader代码)
- [4. 素材导入](#4-素材导入)
- [5. 渲染的魔法](#5-渲染的魔法)
- [6. 小结](#6-小结)

<!-- /TOC -->

## 1. 兼容性

### 1.1. 开发环境
- win10 22H2
- godot v4.0.2

### 1.2. 运行环境
- win10开发电脑可以正常运行
- win7需要至少可以运行opengl3
- win7电脑可以正常运行, 配置如下

![win7配置](image/readme/win7配置.png)

## 2. 技术实现
- 读取资源文件图片
- 读取本地文件图片
- 基于GPU的渲染, 实现heightmap通过material直接生成MeshInstance3D的网格
- 将卫星图直接投影到PlaneMesh
- 在GDScript代码中实现对shader parameter的参数设置
- [官方参考](https://docs.godotengine.org/zh-cn/4.x/tutorials/shaders/your_first_shader/your_first_3d_shader.html):https://docs.godotengine.org/zh-cn/4.x/tutorials/shaders/your_first_shader/your_first_3d_shader.html

## 3. 灰度图生成三维网格

### 3.1. 节点和material的创建
- 创建 `MeshInstance3D` 节点并命名为 `TerrainChunk`
- 点击 `Mesh` 旁边的 `<空>` , 并选择 `新建PlaneMesh`  
![创建MeshInstance3D](image/readme/创建MeshInstance3D.png)

- 点击"平面"标志, 展开属性设置页
- 设置 `subdivide_width` 和 `subdivide_depth` 都为32  
- 点击 `Material` 旁边的 `<空>` 并选择 `新建ShaderMaterial`  
![创建Material](image/readme/创建Material.png)

- 可以在3D界面点击 `透视` > `线框` , 以显示平面切分结果  
![显示线框](image/readme/显示线框.png)

- 点击 `Material` 旁边的球体 > `<空>` > `新建着色器` 创建shader  
![shader创建](image/readme/shader创建.png)

- 将shader保存  
![shader保存](image/readme/shader保存.png)

### 3.2. shader代码
```glsl
shader_type spatial;

// terrain_chunk.gdshader

uniform sampler2D height_map;
uniform sampler2D normal_map;
uniform sampler2D satellite_map;

uniform float height_scale = 0.5;

void fragment() {
	ALBEDO = texture(satellite_map, UV).rgb; // 材质
	NORMAL = texture(normal_map, UV).rgb;    // 法线
}

void vertex()
{
	VERTEX.y = texture(height_map, UV).g * height_scale; // 网格高度
}
```

## 4. 素材导入
可以在我的gitee仓库中获取源代码和图片素材.
直接把三个heightmap.png, normalmap.png, satellitemap.png拖入项目即可  

![素材导入](image/readme/素材导入.png)

## 5. 渲染的魔法
回到TerrainChunk的属性设置界面, 在`Material` > `Shader Parameter`下依次点击各个参数后选择 `加载` > 选择对应图片, 选择的过程中会实时完成视景生成
- `Height map`: heightmap.png
- `Normal map`: normalmap.png
- `Satellite map`: satellite.png
![shader_parameter](image/readme/shader_parameter.png)

可以将显示模式切换为 `透视` > `标准显示` 而不再显示线框

## 6. 小结
至此完成了基于shader和界面操作的单个高程图生成三维视景, 后期继续