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

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; // UVuniform 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; // uvv_color = texture2D(u_bump, uv); // 生成当前高度信息float c_height = v_color.r * u_height; // 生成当前的高度 当前的灰度r值 * 基础高度vec3 vposition = setLength(position, u_radius + c_height); // 生成新的向量 离中心距离为当前基础半径+生成的高度// 传递positionvec4 mPosition = modelViewMatrix * vec4(vposition, 1.0); gl_Position = projectionMatrix * mPosition;}
`,fragmentShader: `uniform float u_opacity; // 透明度uniform vec3 u_color; // 基础颜色varying vec2 v_uv; // UVuniform sampler2D u_map; // 基础材质void main() {gl_FragColor = vec4(u_color, u_opacity) * texture2D(u_map, v_uv);}
`
}

生成

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