Three+Shader 生成3D地球高度地图

通过three.js + shader 生成高度地图

使用自定义着色器读取到当前位置信息的颜色值来生成当前高度。

准备

两张图，一张展示材质，一张生成高度的材质
高度是黑白构成的一张图，通过图片的灰度来生成高度。

开始

生成地球

生成地球模型

// threejs
const options = {
   radius: 100, // 地球的半径
   segments: 640, // 地球的分段数 数量越高 地球精度越高
   map: './images/earth.jpg', // 地球材质
   bump: './images/earthbump.jpg' // 生成高度材质
};
// 生成球类几何
const geometry = new THREE.SphereBufferGeometry(options.radius, options.segments, options.segments);
// 使用自定义着色器
const material = new THREE.ShaderMaterial({
    uniforms: {
        u_radius: {
            value: options.radius // 半径
        },
        u_height: {
            value: 5 // 生成的高度
        },
        u_map: {
            value: new THREE.TextureLoader().load(options.map) // 贴图
        },
        u_bump: {
            value: new THREE.TextureLoader().load(options.bump) // 高度图
        },
        u_color: {
            value: new THREE.Color('rgb(255, 255, 255)')
        },
        u_opacity: {
            value: 1.0
        }
    },
    transparent: true,
    vertexShader: earthShader.vertexShader, // 顶点着色器
    fragmentShader: earthShader.fragmentShader, // 片元着色器
});
const plane = new THREE.Mesh(geometry, material);

顶点与片元

const earthShader = {
    vertexShader: `
	varying vec4 v_color; // 用来存储当前顶点颜色
	varying vec2 v_uv; // UV
	uniform float u_height; // 生成的高度
	uniform float u_radius; // 半径
    uniform sampler2D u_bump; // 高度图
    // 插值计算
	float lerp(float x, float y, float t) {
		return (1.0 - t) * x + t * y;
    }
    // 获得当前向量与中心点的距离
	float glength(vec3 p) {
		return sqrt(p.x * p.x + p.y * p.y + p.z * p.z);
    }
    // 传入当前向量 需要返回的长度
	vec3 setLength(vec3 p, float length) {
		vec3 c_position = p;
		float scale = length / glength(c_position);
		c_position.x *= scale;
		c_position.y *= scale;
		c_position.z *= scale;
		return c_position;
	}
	void main() {
		v_uv = uv; // uv
        v_color = texture2D(u_bump, uv); // 生成当前高度信息
        float c_height = v_color.r * u_height; // 生成当前的高度 当前的灰度r值 * 基础高度
        vec3 vposition = setLength(position, u_radius + c_height); // 生成新的向量 离中心距离为当前基础半径+生成的高度
        // 传递position
		vec4 mPosition = modelViewMatrix * vec4(vposition, 1.0); 
		gl_Position = projectionMatrix * mPosition;
	}
`,
    fragmentShader: `
	uniform float u_opacity; // 透明度
	uniform vec3 u_color; // 基础颜色
	varying vec2 v_uv; // UV
	uniform sampler2D u_map; // 基础材质
	void main() {
		gl_FragColor = vec4(u_color, u_opacity) * texture2D(u_map, v_uv);
	}
`
}

生成

打个广告：可以进QQ群(1082834010)讨论