Three.js使用shader根据高度渐变染色
使用shader根据高度渐变染色
在项目中遇到一个对地形图染色的需求，根据高度对地形进行染色。以下测试代码为学习痕迹。
GLSL代码，uniform float interval参数表示，间隔高度，即每隔interval，在不同色系渐变。
const vertexShaderReplacements = `
precision highp float;
varying vec3 fPosition;
varying vec2 vUv;
void main()
{
vec4 pos = modelViewMatrix * vec4(position, 1.0);
gl_Position = projectionMatrix * pos;
fPosition = (modelMatrix * vec4(position, 1.0)).xyz;
vUv = uv;
}
`;
const fragmentShaderReplacements = `
precision highp float;
uniform float time;
varying vec3 fPosition;
varying vec2 vUv;
uniform float interval;
void d_color() {
float dataY = fPosition.y;
float dataI = interval;
if (dataY <= -dataI) {
// 蓝色-蓝绿
// 0,0,1 -> 0,1,1
gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
} else if (dataY > -dataI && dataY <= 0.0) {
float g = 1.0 - (-dataY / dataI);
gl_FragColor = vec4(0.0, g, 1.0, 1.0);
} else if (dataY > 0.0 && dataY <= dataI) {
// 蓝绿-绿
// 0,1,1 -> 0,1,0
float g = 1.0 - dataY / dataI;
gl_FragColor = vec4(0.0, 1.0, g, 1.0);
} else if (dataY > dataI && dataY <= 2.0 * dataI) {
// 绿-浅绿
// 0,1,0 -> 0.5,1,0
float r = 0.5 * ((dataY - dataI) / dataI);
gl_FragColor = vec4(r, 1.0, 0.0, 1.0);
} else if (dataY > 2.0 * dataI && dataY <= 3.0 * dataI) {
// 浅绿-黄
// 0.5,1,0 -> 1,1,0
float r = 0.5 + ((dataY - 2.0 * dataI) / dataI) * 0.5;
gl_FragColor = vec4(r, 1.0, 0.0, 1.0);
} else if (dataY > 3.0 * dataI && dataY <= 4.0 * dataI) {
// 黄-土黄
// 1,1,0 -> 1,0.76,0
float g = 1.0 - ((dataY - 3.0 * dataI) / dataI) * (1.0 - 0.76);
gl_FragColor = vec4(1.0, g, 0.0, 1.0);
} else if (dataY > 4.0 * dataI && dataY <= 5.0 * dataI) {
// 土黄-橙
// 1,0.76,0 -> 1,0.58,0
float g = 0.76 - ((dataY - 4.0 * dataI) / dataI) * (0.76 - 0.58);
gl_FragColor = vec4(1.0, g, 0.0, 1.0);
} else if (dataY > 5.0 * dataI && dataY <= 6.0 * dataI) {
// 橙-红
// 1,0.58,0 -> 1,0,0
float g = 0.58 - ((dataY - 5.0 * dataI) / dataI) * 0.58;
gl_FragColor = vec4(1.0, g, 0.0, 1.0);
} else {
// 红
// 1.0,0.0,0.0
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
}
void main(){
d_color();
}`;
完整的测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>第一个three.js文件_WebGL三维场景</title>
<style>
body {
margin: 0;
overflow: hidden;
/* 隐藏body窗口区域滚动条 */
}
</style>
<script src="../three.js-master/build/three.js"></script>
<script src="../three.js-master/examples/js/controls/OrbitControls.js"></script>
</head>
<body>
<script>
/**
* 创建场景对象Scene
*/
var scene = new THREE.Scene();
const vertexShaderReplacements = `
precision highp float;
varying vec3 fPosition;
varying vec2 vUv;
void main()
{
vec4 pos = modelViewMatrix * vec4(position, 1.0);
gl_Position = projectionMatrix * pos;
fPosition = (modelMatrix * vec4(position, 1.0)).xyz;
vUv = uv;
}
`;
const fragmentShaderReplacements = `
precision highp float;
uniform float time;
varying vec3 fPosition;
varying vec2 vUv;
uniform float interval;
void d_color() {
float dataY = fPosition.y;
float dataI = interval;
if (dataY <= -dataI) {
// 蓝色-蓝绿
// 0,0,1 -> 0,1,1
gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
} else if (dataY > -dataI && dataY <= 0.0) {
float g = 1.0 - (-dataY / dataI);
gl_FragColor = vec4(0.0, g, 1.0, 1.0);
} else if (dataY > 0.0 && dataY <= dataI) {
// 蓝绿-绿
// 0,1,1 -> 0,1,0
float g = 1.0 - dataY / dataI;
gl_FragColor = vec4(0.0, 1.0, g, 1.0);
} else if (dataY > dataI && dataY <= 2.0 * dataI) {
// 绿-浅绿
// 0,1,0 -> 0.5,1,0
float r = 0.5 * ((dataY - dataI) / dataI);
gl_FragColor = vec4(r, 1.0, 0.0, 1.0);
} else if (dataY > 2.0 * dataI && dataY <= 3.0 * dataI) {
// 浅绿-黄
// 0.5,1,0 -> 1,1,0
float r = 0.5 + ((dataY - 2.0 * dataI) / dataI) * 0.5;
gl_FragColor = vec4(r, 1.0, 0.0, 1.0);
} else if (dataY > 3.0 * dataI && dataY <= 4.0 * dataI) {
// 黄-土黄
// 1,1,0 -> 1,0.76,0
float g = 1.0 - ((dataY - 3.0 * dataI) / dataI) * (1.0 - 0.76);
gl_FragColor = vec4(1.0, g, 0.0, 1.0);
} else if (dataY > 4.0 * dataI && dataY <= 5.0 * dataI) {
// 土黄-橙
// 1,0.76,0 -> 1,0.58,0
float g = 0.76 - ((dataY - 4.0 * dataI) / dataI) * (0.76 - 0.58);
gl_FragColor = vec4(1.0, g, 0.0, 1.0);
} else if (dataY > 5.0 * dataI && dataY <= 6.0 * dataI) {
// 橙-红
// 1,0.58,0 -> 1,0,0
float g = 0.58 - ((dataY - 5.0 * dataI) / dataI) * 0.58;
gl_FragColor = vec4(1.0, g, 0.0, 1.0);
} else {
// 红
// 1.0,0.0,0.0
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
}
void main(){
d_color();
}`;
var geometry = new THREE.PlaneGeometry(30, 200);
let uniforms = {
interval: {
type: "f",
value: 25.0,
},
};
var material = new THREE.ShaderMaterial({
// wireframe: true,
side: THREE.DoubleSide,
uniforms: uniforms,
vertexShader: vertexShaderReplacements,
fragmentShader: fragmentShaderReplacements,
});
const plane = new THREE.Mesh(geometry, material);
plane.position.set(15, 80);
scene.add(plane);
// 平行光
directionalLight = new THREE.DirectionalLight(0xffffff);
// 平行光配置
directionalLight.position.set(-40, 60, -10);
directionalLight.castShadow = true;
directionalLight.shadow.camera.near = 20;
directionalLight.shadow.camera.far = 200;
directionalLight.shadow.camera.left = -50;
directionalLight.shadow.camera.right = 50;
directionalLight.shadow.camera.top = 50;
directionalLight.shadow.camera.bottom = -50;
// 距离和强度
directionalLight.distance = 0;
directionalLight.intensity = 0.5;
// 设置阴影的分辨率
directionalLight.shadow.mapSize.width = 1024;
directionalLight.shadow.mapSize.height = 1024;
scene.add(directionalLight);
//环境光
var ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);
// 辅助坐标系 参数250表示坐标系大小，可以根据场景大小去设置
var axisHelper = new THREE.AxesHelper(250);
scene.add(axisHelper);
const cameraHelper = new THREE.CameraHelper(
directionalLight.shadow.camera
);
// scene.add(cameraHelper);
/**
* 相机设置
*/
var width = window.innerWidth; //窗口宽度
var height = window.innerHeight; //窗口高度
var k = width / height; //窗口宽高比
var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
//创建相机对象
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
/**
* 创建渲染器对象
*/
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height); //设置渲染区域尺寸
renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
renderer.shadowMap.enabled = true;
//执行渲染操作 指定场景、相机作为参数
// renderer.render(scene, camera);
function render() {
renderer.render(scene, camera); //执行渲染操作
// mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
requestAnimationFrame(render); //请求再次执行渲染函数render
}
render();
var controls = new THREE.OrbitControls(camera, renderer.domElement); //创建控件对象
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
