【Threejs进阶教程-着色器篇】5. 2D SDF(二)圆形波纹效果

已于 2024-09-04 09:20:59 修改
阅读量339 收藏 9
点赞数 5
分类专栏： Threejs进阶教程-着色器篇 文章标签： 着色器 glsl threejs webgl
于 2024-07-30 20:32:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42760477/article/details/140804568
版权

2D SDF 圆形波纹效果

前四篇地址，请按顺序学习

【Threejs进阶教程-着色器篇】1. Shader入门(ShadertoyShader和ThreejsShader入门)
【Threejs进阶教程-着色器篇】2. Uniform的基本用法与Uniform的调试
【Threejs进阶教程-着色器篇】3. Uniform的基本用法2与基本地球昼夜效果
【Threejs进阶教程-着色器篇】4. 2D SDF(一) SDF的基本用法

本博客使用模板代码中的Shader模板

请各位自取【模板代码】用于编写Threejs Demo的模板代码

绘制第一圈波纹

上一篇中我们讲到了圆形的sdf，我们依然在片元着色器中引入sdCircle这个函数

<script type="x-shader/x-fragment" id="fragmentShader">
    varying vec2 vUv;

    float sdCircle( vec2 p, float r ){
        return length(p) - r;
    }

    void main(){
        gl_FragColor = vec4(1.0,0.0,0.0,1.0);
    }
</script>

一般来说，咱们看到的波纹效果，应该是这样的
在这里插入图片描述
我们先考虑绘制第一圈波纹，可以看出，越靠近边缘的地方，就越亮，越靠近中心的地方就越暗，因为在项目上，波纹基本上都是透明的，所以本次我们以操作透明度的方式来开发这个效果

<script type="x-shader/x-fragment" id="fragmentShader">
    varying vec2 vUv;

    float sdCircle( vec2 p, float r ){
        return length(p) - r;
    }

    void main(){

        vec2 aUv = vUv - 0.5;
        vec3 color = vec3(1.0,0.0,0.0);
        float alp = sdCircle(aUv, 0.5);
        gl_FragColor = vec4(color,alp);
    }
</script>

在这里插入图片描述
首先我们先分析上面的代码
先对vUv - 0.5，将坐标系平移到中心
然后创建一个三维向量，作为颜色来使用
然后我们使用sdf函数，计算透明度，计算结果如上图所示

在这里插入图片描述
根据被移动后的坐标系，我们可以推测出，越接近圆心的，length的取值会越小，再-0.1的时候，就会越小，透明度小于0时会显示为0，所以一直到边缘处，u=0.5，v=0.5的时候，最后计算下来的透明度约为 sqrt( 0.5 * 0.5 * 2 ) ≈ 0.707

绘制多圈波纹

那么，我们可以此时，通过把uv * 4.0，来扩大坐标系，达到调整边缘的效果

		//vec2 aUv = vUv - 0.5; //旧代码
        vec2 aUv = (vUv - 0.5) * 4.0;//新代码

在这里插入图片描述

但是这样我们又有了新问题，此时坐标系变成了 uv的最大值 = 0.5 * 4 = 2.0，那么，在uv都为2.0的地方，透明度是多少呢？ 计算一下就知道了 sqrt(2 * 2 * 2) = 2.82，透明度最大值是1，超过1了按照1来显示，那么，我们可以考虑只取小数部分

fract函数

fract只取小数部分，可以作为周期函数来使用
在这里插入图片描述
fract函数的图像大致如图所示，如果要做类似波纹的效果，且不是圆滑的变化规则，可以使用fract函数来做
在这里插入图片描述

我们接下来用fract函数来处理我们的效果

<!-- 片元着色器内容 -->
<script type="x-shader/x-fragment" id="fragmentShader">
    varying vec2 vUv;

    float sdCircle( vec2 p, float r ){
        return length(p) - r;
    }

    void main(){

        vec2 aUv = (vUv - 0.5) * 4.0;

        vec3 color = vec3(1.0,0.0,0.0);

        float alp = fract(sdCircle(aUv, 0.5));

        gl_FragColor = vec4(color,alp);
    }
</script>

在这里插入图片描述
我们其实可以再对uv放大一点，比如说放大到10
在这里插入图片描述

让光波动起来

然后我们还需要让它动起来，因为fracrt本身也是周期性函数，那么我们可以通过追加iTime的方式，让fract函数的计算结果发生改变

我们对几何体和材质也稍微做一下修改


    let uniforms = {
        iTime:{value:0}
    }

    function addMesh() {
        //常规情况下,planeGeometry,circleGeometry是与z轴垂直的,改成与y轴垂直,只需要沿着x轴让几何体旋转-90度即可
        //let geometry = new THREE.PlaneGeometry(10,10).rotateX(-Math.PI/2);
        //为了让效果更适用于圆形,我们从方形的planeGeometry换成CircleGeometry
        let geometry = new THREE.CircleGeometry(5,32).rotateX(-Math.PI/2);
        let material = new THREE.ShaderMaterial({
            uniforms,
            vertexShader:document.getElementById('vertexShader').textContent,
            fragmentShader:document.getElementById('fragmentShader').textContent,
            transparent:true
        })
        let mesh = new THREE.Mesh(geometry,material);
        scene.add(mesh);
    }


    function render() {
        uniforms.iTime.value += 0.01;
        renderer.render(scene,camera);
        orbit.update();
        requestAnimationFrame(render);
    }

修改片元着色器响应动态变化

<script type="x-shader/x-fragment" id="fragmentShader">
    varying vec2 vUv;
    uniform float iTime;

    float sdCircle( vec2 p, float r ){
        return length(p) - r;
    }

    void main(){
        vec2 aUv = (vUv - 0.5) * 10.0;
        vec3 color = vec3(1.0,0.0,0.0);
		//有fract控制，最终数值只会取小数部分
        float alp = fract(sdCircle(aUv, 0.5) - iTime);
        gl_FragColor = vec4(color,alp);
    }
</script>

在这里插入图片描述

使用uniform控制最终效果

首先，我们分析一下现在代码中的常量，一般来说常量都可以单独拎出来做uniform
我们光波的圈数由 aUv后面乘的10.0来控制
我们光波的颜色由vec3 color来控制
我们光波的扩散速度，可以给iTime乘一个常量来控制
我们的光波宽度，可以通过对alp做pow计算来控制
那么，我们接下来添加这四个uniform，并且添加GUI控制

如果看不懂接下来的代码，请移步前三篇，全部的代码在前三篇都有解释

追加uniform，以及lil.gui控制器

    let uniforms = {
        iTime:{value:0},
        iFreq:{value:10.0},//频率,光波圈数
        iColor:{value:new THREE.Color('#ff0000')},//光波颜色
        iSpeed:{value:1},//扩散速度
        iPower:{value:2},//光波强度
    }

    function addMesh() {
        //常规情况下,planeGeometry,circleGeometry是与z轴垂直的,改成与y轴垂直,只需要沿着x轴让几何体旋转-90度即可
        //let geometry = new THREE.PlaneGeometry(10,10).rotateX(-Math.PI/2);
        //为了让效果更适用于圆形,我们从方形的planeGeometry换成CircleGeometry
        let geometry = new THREE.CircleGeometry(5,32).rotateX(-Math.PI/2);
        let material = new THREE.ShaderMaterial({
            uniforms,
            vertexShader:document.getElementById('vertexShader').textContent,
            fragmentShader:document.getElementById('fragmentShader').textContent,
            transparent:true
        })
        let mesh = new THREE.Mesh(geometry,material);
        scene.add(mesh);
        
        
        let param = {
            color:"#ff0000" //lil.gui读取threejs的颜色比较麻烦,个人习惯在这里单独写一个来控制
        };
        
        let gui = new GUI();
        gui.add(uniforms.iFreq,'value',0,50,0.01).name('光波圈数');
        gui.add(uniforms.iPower,'value',0,50,0.01).name('光波强度');
        gui.add(uniforms.iSpeed,'value',0,50,0.01).name('扩散速度');
        gui.addColor(param,'color').name('光波颜色').onChange(v=>{
            uniforms.iColor.value = new THREE.Color(v);
        })
        
    }


    function render() {
        uniforms.iTime.value += 0.01;
        renderer.render(scene,camera);
        orbit.update();
        requestAnimationFrame(render);
    }

修改片元着色器

<script type="x-shader/x-fragment" id="fragmentShader">
    varying vec2 vUv;
    uniform float iTime;
    uniform float iFreq;
    uniform vec3 iColor;
    uniform float iSpeed;
    uniform float iPower;

    float sdCircle( vec2 p, float r ){
        return length(p) - r;
    }

    void main(){
        vec2 aUv = (vUv - 0.5) * iFreq;
        float alp = fract(sdCircle(aUv, 0.5) - iTime * iSpeed);
        alp = pow(alp,iPower);//对扩散的光波pow可以减少光波有颜色的部分的宽度
        gl_FragColor = vec4(iColor,alp);
    }
</script>

最终效果

在这里插入图片描述

完整源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            width:100vw;
            height: 100vh;
            overflow: hidden;
            margin: 0;
            padding: 0;
            border: 0;
        }
    </style>
</head>
<body>

<script type="importmap">
			{
				"imports": {
					"three": "../three/build/three.module.js",
					"three/addons/": "../three/examples/jsm/"
				}
			}
		</script>

<script type="x-shader/x-vertex" id="vertexShader">
    varying vec2 vUv;
    void main(){
        vUv = vec2(uv.x,uv.y);
        vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
        gl_Position = projectionMatrix * mvPosition;

        gl_Position = projectionMatrix * modelMatrix * viewMatrix * vec4( position, 1.0 );
    }

</script>
<script type="x-shader/x-fragment" id="fragmentShader">
    varying vec2 vUv;
    uniform float iTime;
    uniform float iFreq;
    uniform vec3 iColor;
    uniform float iSpeed;
    uniform float iPower;

    float sdCircle( vec2 p, float r ){
        return length(p) - r;
    }

    void main(){
        vec2 aUv = (vUv - 0.5) * iFreq;
        float alp = fract(sdCircle(aUv, 0.5) - iTime * iSpeed);
        alp = pow(alp,iPower);//对扩散的光波pow可以减少光波有颜色的部分的宽度
        gl_FragColor = vec4(iColor,alp);
    }
</script>

<script type="module">

    import * as THREE from "../three/build/three.module.js";
    import {OrbitControls} from "../three/examples/jsm/controls/OrbitControls.js";
    import {GUI} from "../three/examples/jsm/libs/lil-gui.module.min.js";

    window.addEventListener('load',e=>{
        init();
        addMesh();
        render();
    })

    let scene,renderer,camera;
    let orbit;

    function init(){

        scene = new THREE.Scene();
        renderer = new THREE.WebGLRenderer({
            alpha:true,
            antialias:true
        });
        renderer.setSize(window.innerWidth,window.innerHeight);
        document.body.appendChild(renderer.domElement);

        camera = new THREE.PerspectiveCamera(50,window.innerWidth/window.innerHeight,0.1,2000);
        camera.add(new THREE.PointLight());
        camera.position.set(15,15,15);
        scene.add(camera);

        orbit = new OrbitControls(camera,renderer.domElement);
        orbit.enableDamping = true;
        scene.add(new THREE.GridHelper(10,10));
    }

    let uniforms = {
        iTime:{value:0},
        iFreq:{value:10.0},//频率,光波圈数
        iColor:{value:new THREE.Color('#ff0000')},//光波颜色
        iSpeed:{value:1},//扩散速度
        iPower:{value:2},//光波强度
    }

    function addMesh() {
        //常规情况下,planeGeometry,circleGeometry是与z轴垂直的,改成与y轴垂直,只需要沿着x轴让几何体旋转-90度即可
        //let geometry = new THREE.PlaneGeometry(10,10).rotateX(-Math.PI/2);
        //为了让效果更适用于圆形,我们从方形的planeGeometry换成CircleGeometry
        let geometry = new THREE.CircleGeometry(5,32).rotateX(-Math.PI/2);
        let material = new THREE.ShaderMaterial({
            uniforms,
            vertexShader:document.getElementById('vertexShader').textContent,
            fragmentShader:document.getElementById('fragmentShader').textContent,
            transparent:true
        })
        let mesh = new THREE.Mesh(geometry,material);
        scene.add(mesh);


        let param = {
            color:"#ff0000" //lil.gui读取threejs的颜色比较麻烦,个人习惯在这里单独写一个来控制
        };

        let gui = new GUI();
        gui.add(uniforms.iFreq,'value',0,50,0.01).name('光波圈数');
        gui.add(uniforms.iPower,'value',0,50,0.01).name('光波强度');
        gui.add(uniforms.iSpeed,'value',0,50,0.01).name('扩散速度');
        gui.addColor(param,'color').name('光波颜色').onChange(v=>{
            uniforms.iColor.value = new THREE.Color(v);
        })

    }


    function render() {
        uniforms.iTime.value += 0.01;
        renderer.render(scene,camera);
        orbit.update();
        requestAnimationFrame(render);
    }

</script>
</body>
</html>

如有不明白的，可以在下方留言或者加群

如有其他不懂的问题，可以在下方留言，也可以加入qq群咨询，
Web3D+GIS开源社区为新群，学习气氛良好，群号131995948
本人的群，群号867120877
欢迎大家来群里交流技术，互相帮助互相进步
在这里插入图片描述
在这里插入图片描述

幻梦丶海炎
关注
  • 5
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【 Threejs 】- Shader 着色器实例渲染教程
老司机的后备箱
12-20 2168
1.顶点着色器和片元着色器需要保持变量统一，uniform变量和varying变量2.顶点着色器和片元着色器的都需要main函数3.顶点着色器的实际修改是，片元着色器的实际修改是4.浏览器不执行着色器语言，需要借助Threejs5.Threejs使用ShaderMaterial来使用着色器，可以通过变量间接修改着色器内容！6.着色器是通过GPU渲染的，不会占用CPU资源好了接下来所学即所用，把这些枯燥的知识运用到代码当中。main.js 完整代码init();animate()
threejs虚幻粒子波纹动画特效.zip
01-15
threejs虚幻粒子波纹动画特效，使用threejs实现炫酷的粒子特效，直接打开就能使用，有一部分自己写的js代码，可以直接用于vue中，因为是原生js实现的特效
Three.js shader 城市 雷达 扫描 波动 扩散效果
11-05
Three.js shader 城市 雷达 扫描 波动 扩散效果
基于canvas使用three.js制作的立体水波纹效果
04-08
使用three.js绘制的具有立体感的水波面效果，里面涉及很多算法，没有思路的同学可以借鉴一下。
three.js 实现波纹效果
weixin_42581003的博客
01-05 688
可以使用 THREE.ShaderMaterial 来实现波纹效果。首先，你需要创建一个网格并使用 THREE.ShaderMaterial 来渲染它。然后，你可以使用 THREE.ShaderMaterial 的 uniforms 属性来传递相关的参数(例如波纹的速度和波纹的强度)到着色器中。最后，在着色器中实现波纹效果的算法。 这是一个简单的例子： // 创建网格 const geometry...
three.js利用着色器实现波浪效果
最新发布
zhaoyan_love的博客
07-03 319
着色器旗帜。
three.js虚幻粒子波纹动画js特效
ICode联盟
06-13 563
下载地址基于three.js类库实现的虚幻粒子波纹动画特效dd:
动态波浪效果threejs-waves
07-19
jquery实现动态波浪效果threejs-waves，随鼠标滑动而动
New-folder-(2).rar_SDC FFT_fft sdf_sdc-sdf fft_sdf fft
09-20
标题中的"New-folder-(2).rar_SDC FFT_fft sdf_sdc-sdf fft_sdf fft"提到了几个关键术语，它们都是与数字信号处理和快速傅里叶变换（FFT）相关的。"SDC"通常指的是“Sub-Digit Carry”或“Signed Digit Carry”，这...
task7-2创建学生成绩表.sdf
05-26
task7-2创建学生成绩表.sdf
Threejs 波纹扩散，光圈扩散
09-21
threejs 光圈扩散 波纹扩散效果 像智慧城市，建筑等三维物体外围有个光圈向外扩散效果，文件请发布到ngix或者iis等其它web服务器里，然后浏览，直接打开不行！
城市波浪特效 掠过特效 智慧城市
11-01
城市波浪特效 掠过特效 智慧城市 使用Bloom效果；使用obj作为模型支撑 demo https://blog.csdn.net/qq_29814417/article/details/102840178
基于three.js的炫酷Canvas 3D线条动画特效
12-12
html5-canvas-animation是一款基于three.js的HTML5 canvas 3D线条动画特效。该3D线条动画特效可以用鼠标进行互动，canvas的背景颜色可以随机改变。你可以使用它来制作页面顶部的Banner，效果会非常的酷。
Python库 | sdf-wot-converter-0.8.0.tar.gz
05-21
资源分类：Python库 所属语言：Python 资源全名：sdf-wot-converter-0.8.0.tar.gz 资源来源：官方 安装方法：https://lanzao.blog.csdn.net/article/details/101784059
基于three.js生成动态波浪背景效果
失眠时间的博客
11-30 1601
基于three.js生成动态波浪背景效果。
记录--Threejs-着色器实现一个水波纹
林恒的博客
06-27 1736
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 hree.js 是一个基于 WebGL 的 JavaScript 3D 库，用于创建和渲染 3D 图形场景。 一、 图像渲染过程 1、webGL webGL: WebGL 是一种基于 JavaScript API 的图形库，它允许在浏览器中进行高性能的 3D 图形渲染。webGL的渲染依赖于底层GPU的渲染能力。 通过获取&lt...
threeJs着色器
c_qianxia5040的博客
06-20 1276
就像活字印刷，你的程序就像一个 function（函数），输入位置信息，输出颜色信息，当它编译完之后会以相当快的速度运行。然后，GPU会按照着色器的指示处理所有的这些数据，接着几何体便出现在渲染中。的渲染流程中，顶点着色器代码先执行处理顶点，得到一系列片元，然后再执行片元着色器代码处理片元。将按照顶点着色器中的指示处理所有这些信息，以便将顶点投影到2D空间，该空间将成为我们的渲染。它设置渲染到屏幕的每个单独的“片元”（像素）的颜色。的着色器代码分为顶点着色器代码和片元着色器代码两部分，顶点着色器代码会在。
systemAdmins.forEach(systemAdmin -> { systemAdmin.setCreateTimeStr(sdf1.format(systemAdmin.getCreateTime())); });每部分代表什么
05-23
这段代码是Java 8中的Lambda表达式，用于对一个类型为List<SystemAdmin>的集合进行遍历操作，并对其中的每个SystemAdmin对象的创建时间属性进行格式化，最终将格式化后的时间字符串设置到对象的createTimeStr属性上。 具体来说，代码中的部分含义如下： - `systemAdmins.forEach()`：使用forEach()方法遍历系统管理员列表。 - `systemAdmin ->`：Lambda表达式的参数，表示当前遍历到的SystemAdmin对象。 - `{}`：Lambda表达式的主体，包含对SystemAdmin对象创建时间属性进行格式化的代码。 - `systemAdmin.setCreateTimeStr()`：将格式化后的时间字符串设置到SystemAdmin对象的createTimeStr属性上。 - `sdf1.format()`：使用SimpleDateFormat类对SystemAdmin对象的创建时间属性进行格式化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值