Three.js使用shader根据高度渐变染色

最新推荐文章于 2024-07-24 11:09:48 发布
最新推荐文章于 2024-07-24 11:09:48 发布
阅读量3.4k 收藏 15
点赞数
分类专栏： Three.js 文章标签： javascript 前端 html threejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wz122330/article/details/126609844
版权

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>

在这里插入图片描述

悠然~
关注
  • 0
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Three.js 快速入门教程 09 - 动画效果与过渡效果
最佳编码阿柚的博客
05-18 1224
在 3D 可视化项目中适当使用动画和过渡效果，可以让模型的状态切换更加自然，使用户界面更生动有趣，增强用户与应用程序的交互感。更进一步的，动画和过渡效果应用于讲故事或展示产品，可增强故事叙述的效果，吸引用户的注意力，例如场景漫游。本篇章将分别通过 Three.js 自带的关键帧动画，以及三方库 tween.js 来实现动画效果和过渡效果。
Three.js shader 城市 雷达 扫描 波动 扩散效果
11-05
Three.js shader 城市 雷达 扫描 波动 扩散效果
使用three.js 的 交互式 3D 心脏模型
07-14
使用three.js 的 交互式 3D 心脏模型
Threejs渐变光柱效果
qq_40147088的博客
04-06 5464
一、实现原理 通过shader，将物体的透明度由下往上，从1到0渐变即可（只需要两圈顶点，底下一圈alpha设为1，上面一圈alpha设为0） 二、实现步骤 1、创建geometry 这个几何体类似于圆柱，只是没有上下两个底面 let bottomPos = []; let topPos = []; let angleOffset = Math.PI*2/segment; for(var i=0;i<segment;i++){ let x = .
three.js学习笔记(十四)——Shaders着色器
hongsir的博客
05-11 8708
什么是着色器？ 实际上着色器是WebGL的主要组件之一。如果我们在没接触Three.js情况下开始学习WebGL，着色器将是我们首先且必须要学的知识，这也是为什么原生WebGL很难入门。 着色器是一种使用GLSL(OpenGL Shading Language)编写并在GPU上运行的程序。它们被用于定位几何体的每个顶点，并为该几何体的每个可见像素着色。使用“像素Pixel”来描述其实并不准确，因为渲染的每个点不一定与屏幕上的每个像素相匹配，因此我们更倾向于使用术语“片元fragment”。 之后我们会向着色
webgl之Three.js学习 day3使用Three.js的材质
chengzhaohui18的博客
03-06 709
在开始这一节前，我们先将要探究的材质列在下表中： 名称 描述 MeshBasicMaterial(网格基础材质) 基础材质，可以用它赋予几何体一种简单的颜色，或者显示几何体的线框。 MeshDepthMaterial(网格深度材质) 根据网格到相机的距离，这种材质决定如何给网格染色。 MeshNorma...
创建自定义着色器：在 Three.js 中定制渲染效果
左本Web3D
06-08 2582
Three.js 是一个功能强大的 WebGL 库，它提供了丰富的渲染功能和内置的着色器。然而，有时候你可能需要更加个性化和定制化的渲染效果，这就需要使用自定义着色器来实现。本篇博文将介绍如何在 Three.js 中创建自定义着色器，并展示一些常见的渲染效果定制示例。编写顶点着色器和片元着色器代码编写顶点着色器和片元着色器代码时，实际的实现会因特定的需求和场景而有所不同。以下是一个简单的示例，展示了一个基本的顶点着色器和片元着色器代码：// 片元颜色输出// 将片元颜色设置为红色。
使用Three.js的材质
yinjing8435的博客
04-28 2463
1.three.js提供哪些材质？     MeshBasicMaterial(网格基础材质)/基础材质，，可以用它富裕几何体一种简单的亚瑟，或者显示几何体的线框     MeshDepthMaterial（网格深度材质）/根据网格到相机的举例，这种材质决定如何给网格染色     MeshNormalMaterial(网格法向材质)/这是一种简单的材质，根据物体表面的方向向量计算
04.ThreeJs开发指南-第四章-材质
KingW
09-02 9813
第四章 材质材质种类： MeshBasicMaterial：为几何体赋予一种简单的颜色，或者显示几何体的线框 MeshDepthMaterial：根据网格到相机的距离，该材质决定如何给网格染色 MeshNormalMaterial：根据物体表面的法向量计算颜色 MeshFaceMaterial：这是一种容器，可以在该容器中为物体的各个表面上设置不同的颜色 MeshLambertMater
跳动的心（three.js,shader）
01-23
标题中的“跳动的心（three.js,shader）”是一个基于WebGL图形库three.js和着色器(shader)技术实现的互动艺术项目。这个项目的核心是创建一个视觉上呈现出心脏跳动效果的3D模型，利用了JavaScript编程语言以及webGL...
three.js的shader应用
07-14
**标题解析：** "three.js的shader应用" 这个标题明确指出了我们要探讨的是如何在three.js这个JavaScript 3D库中运用shader技术。Shader是计算机图形学中用于处理图形渲染的重要部分，它们允许我们在GPU上执行自定义...
使用THREE.JS开发的下雨效果
07-05
THREE.JS是一个基于WebGL的JavaScript库，用于在浏览器中创建三维图形和动画。它提供了丰富的API，使得开发者能够方便地构建复杂的3D场景，包括光照、材质、几何体等元素。在这个“使用THREE.JS开发的下雨效果”项目...
threejs(13)-着色器设置点材质
woyebuzhidao321的博客
11-14 507
gl_FragCoord内置变量是vec2类型，它表示WebGL在canvas画布上渲染的所有片元或者说像素的坐标，坐标原点是canvas画布的左上角，x轴水平向右，y竖直向下，gl_FragCoord坐标的单位是像素，gl_FragCoord的值是vec2(x,y),通过gl_FragCoord.x、gl_FragCoord.y方式可以分别访问片元坐标的纵横坐标。而gl_PointCoord是在点渲染模式中生效的，而它的范围是对应小正方形面，同样是左上角[0,0]到右下角[1,1]。
元宇宙引擎脑语言2500令v0.5.6
热门推荐
脑语言
02-08 1万+
　　脑语言一令是一个不断变化的过程，而我们的能力也十分有限，对于翻译不准确、表达不合适、定义不严谨、意思不合理等等问题都是我做得还不够好的原因，欢迎指正与交流，以便通过“共产”的方式让“广集天下智慧”的机制及早在人类世界建立。 　　过去，我们总是想让AI更接近人类，脑语言的存在也是为了让人类的能力更接近AI
Next.js静态导出与动态路由优化
天涯学馆
07-20 1053
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 416
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
【React 】开发环境搭建详细指南
最新发布
lph159的博客
07-24 856
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
three.js烟雾shader
09-12
### 回答1： 下面是一个简单的 three.js 烟雾 shader 示例，可以作为参考： ``` const smokeVertexShader = ` varying vec3 vWorldPosition; void main() { vec4 worldPosition = modelMatrix * vec4(position, 1.0); vWorldPosition = worldPosition.xyz; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`; const smokeFragmentShader = ` uniform vec3 color; uniform float opacity; varying vec3 vWorldPosition; void main() { float depth = gl_FragCoord.z / gl_FragCoord.w; float fogFactor = smoothstep(100.0, 300.0, depth); gl_FragColor = vec4(color, opacity) * fogFactor; }`; const smokeMaterial = new THREE.ShaderMaterial({ uniforms: { color: { value: new THREE.Color(0xaaaaaa) }, opacity: { value: 0.5 } }, vertexShader: smokeVertexShader, fragmentShader: smokeFragmentShader, transparent: true }); const smokeGeometry = new THREE.PlaneGeometry(1000, 1000); const smokeMesh = new THREE.Mesh(smokeGeometry, smokeMaterial); smokeMesh.position.set(0, 0, -500); scene.add(smokeMesh); ``` 这个 shader 通过计算深度值来模拟烟雾效果。在顶点着色器中，我们通过将顶点位置乘以模型矩阵得到世界坐标系下的位置，然后将它传递给片元着色器。在片元着色器中，我们计算每个像素的深度值，并根据深度值计算烟雾因子，最后将它乘以颜色和不透明度来得到最终的颜色。 你可以根据需要调整烟雾的颜色、不透明度、大小和位置。 ### 回答2： three.js是一个功能强大的JavaScript库，它提供了一套易于使用的工具和功能，用于在Web上创建交互式的3D图形。其中一个功能是烟雾shader，它允许我们在我们的场景中添加逼真的烟雾效果。 three.js的烟雾shader通过在场景中创建一个气体云层，并向其应用特定的效果来实现。这个效果通常是通过使用Perlin噪声来模拟烟雾的动态外观的。这种噪声会根据时间和空间的变化来生成一个连续的、无缝的云状图案。 通过使用three.js的ShaderMaterial和自定义着色器，我们可以将烟雾效果应用于物体或整个场景。使用这个材质，我们可以设置烟雾的颜色、透明度、密度等参数，以实现我们想要的效果。 烟雾shader可以使我们的场景更加生动和逼真。它可以在火焰、蒸汽机、爆炸等各种场景中添加真实的烟雾效果。在游戏开发、虚拟现实和建筑可视化等领域，烟雾shader都可以发挥重要的作用，提高用户体验和视觉效果。 尽管实现烟雾shader可能需要一些编程和图形学的知识，但由于three.js库已经提供了许多封装好的功能和模块，我们可以轻松地集成和使用它们。此外，three.js的官方文档和社区也提供了大量的教程和示例代码，帮助我们快速上手和理解相关概念。 总的来说，three.js的烟雾shader是一个强大的工具，它为我们提供了在Web上创建逼真烟雾效果的能力。它可以为我们的场景增加动态和真实感，提高用户体验和视觉效果。对于对3D图形感兴趣的开发者来说，three.js的烟雾shader是一个不可忽视的资源。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值