THREE中实现等值线效果

等值线

如果geometry中的每个顶点有额外的数值用来着色，比如地形模型，每个几何顶点有高程值，可以通过材质实现等高线效果。

等值线材质

THREE中使用ShaderMaterial来作为等值线的基础材质。这里先预定义一个概念：

着色值：顶点附属的观测值，如地形中的高程值。

核心思想是通过片元着色器中，对GPU光栅化自动插值后的着色值进行取模，来实现固定间隔的绘制颜色。等值线的线宽暂取固定值，按像素指定。

归一化

为了计算方便，将着色值归一化到0-1之间，等值线的间隔也计算到0-1范围内，代码中contourmax,contourmin为着色值的最大最小范围，vcontour为当前像元的着色值。通过mod方法实现对着色值的间隔采样，最后在通过step函数将取模后的结果约束到一定范围内。代码中的stepresolution，我计算中取5个像素和整个绘制屏幕的比5/width，其实这里绘制出来的线宽并不是5个像素，因为step中使用的着色值并没有和屏幕像素挂钩，这里可以随意传值。

    float range=1.0/(contourmax-contourmin);// 当前值所在范围的百分比float m=(vcontour-contourmin)*range;float lxs=m;// 数值区间计算到范围百分比float stepm=cstep*range;// 归一后的数值取模，计算到0-stemp区间内m=mod(m,stepm);// 在stepm线宽内的指定为1，超过范围的指定为0m=step(stepm-stepresolution,m);

最后step后得到的m值即为需要绘制等值线的像元，可以通过mix其他颜色来在基础颜色上绘制等值线，或者m值为0是直接丢弃片元，只绘制等值线，或者提前计算好着色值对应的颜色，可以按值来绘制每条线。

截图

锯齿还是很严重的，太懒了，再说吧。。。。

ThreeJS 实现等值线效果相关推荐

使用threejs简单Web3D效果
目录 1. threejs介绍 2. thresjs的使用 3. 组件介绍 4. threejs的动画 5. 参考资料前几天在网上看到一个threejs的实现的web 3d的动画,很炫酷,所以特地去 ...
3Dmax+Substance Painter(SP)+.glb+threejs 次时代效果
3Dmax+Substance Painter(SP)+.glb+threejs 最近搭建一个页面展示的网页,需要有3d模型及动画加上一些类似大数据界面效果,因前段时间写过一个threejs+.net ...
threejs：流光效果封装
在网上看到的这种流光效果,在某宝买了源码后,决定把这个效果封装成js文件,以后用起来就很方便了. flyCurve.js文件代码如下: import * as THREE from 'three' v ...
Threejs渐变光柱效果
一.实现原理通过shader,将物体的透明度由下往上,从1到0渐变即可(只需要两圈顶点,底下一圈alpha设为1,上面一圈alpha设为0) 二.实现步骤 1.创建geometry 这个几何体类似于 ...
使用threejs点云秀出酷炫的图片效果(一)
来源:http://blog.csdn.net/srk19960903/article/details/70214556 使用了点云拼凑出了照片轮播十分有趣,于是用threejs实现这个效果. 首先这 ...
Web 3D烟雾火焰喷水粒子效果-WebGL/Threejs技术倾心打造
Threejs实现粒子效果 ThreeJS是一个3D的JS库,封装了WebGL的功能.就是在浏览器端开发3D图形相关的程序的一个库或者说一个标准.实现烟雾.火焰.喷水粒子效果典型"5毛特效& ...
【threejs】实现星空、星链、太阳系、线等效果的参考
前言星空其实就是粒子. 星链是一组星星用线连接. 如果要增加指向的箭头,则需要再加上箭头. 一些入门的Threejs项目参考效果 threejs实现3D星空效果没实际跑过,无完整项目代码,效果还 ...
LeaFlet学习之结合turf.js生成简单的等值线demo
本文主要结合turf.js生成等值线俺,进行展示效一.放张图: 二.全部源码 <!DOCTYPE html> <html xmlns="http://www.w3.org ...
原生threeJS入门
three官网地址https://threejs.org/ 用了parceljs来配置Web应用打包工具--相当于vite和webpack parceljs官网https://v2.parceljs. ...
ThreeJS后期处理
threejs的后期处理通道包提供了各种强大的效果,有了这些效果会大大降低代码难度,并且可以直接使用内置的着色器包,避免了复杂的着色器代码编写.后期处理通道一般都按顺序执行,后加入的会覆盖前面的通道. ...

ThreeJS 实现等值线效果

THREE中实现等值线效果

等值线

等值线材质

归一化

截图

ThreeJS 实现等值线效果相关推荐

最新文章

热门文章