threejs-热力图(shader)

最新推荐文章于 2024-07-21 21:30:42 发布

NCQuan

最新推荐文章于 2024-07-21 21:30:42 发布

阅读量1.2k

点赞数 1

分类专栏： three.js

本文链接：https://blog.csdn.net/weixin_42549808/article/details/115939331

版权

three.js 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

相比于通过改变imageData的方式，本次将透明度阶梯图和温度调色板图传入着色器，在着色器中进行纹理采样最终生成热力图。
着色器代码很简单，先对透明度阶梯图采样，再根据采样值对温度调色板图采样得到最终片元颜色。

<script type="x-shader/x-vertex" id="vertexshader">

  varying vec2 vUv;
  void main() {
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }

</script>

<script type="x-shader/x-fragment" id="fragmentshader">

  #ifdef GL_ES
  precision highp float;
  #endif
  varying vec2 vUv;
  uniform sampler2D alphaScaleMap;
  uniform sampler2D paletteMap;
  void main() {
    vec4 alphaColor = texture2D(alphaScaleMap, vUv);
    vec4 color = texture2D(paletteMap, vec2(alphaColor.a, 0.0));
    gl_FragColor = vec4(color.r, color.g, color.b, alphaColor.a);
  }

</script>

案例源代码:https://github.com/NCQuan/heatMap_Shader/blob/main/heatMap_shader.html