专栏首页郭先生的博客three.js 着色器材质之变量(三)

three.js 着色器材质之变量(三)

这篇郭先生在练习一下着色器变量,在度娘上面或者官网上经常看到类似水波一样的效果,这篇就试着做一个这样的效果,顺便巩固一下顶点着色器和片元着色器,毕竟多多练习才能更好地掌握。效果如下图,在线案例请点击变色球

捕57获.PNG

1. 设置几何体

设置一个几何体,对于波浪效果,我们制作一个球几何体(当然也可以设置其他的,可能有意想不到的效果哦!)。

var sphere = new THREE.SphereBufferGeometry(10, 120, 80);

2. 设置attribute属性

这里我们使用一个叫做noise的attribute属性来搞定它,同时我们在设置一个类型化数组boolArray来辅助它。

count = sphere.attributes.position.count;//顶点的数量
verticesArray = new Float32Array(count);//存放每一个点的噪声值
boolArray = new Float32Array(count);//辅助类型数组
for(var v = 0; v < count; v++) {
    verticesArray[v] = Math.random() * 2 + 10;//随机数[10,12)
    if(Math.random() >= 0.5) {//在创造一个随机数,如果大于如果大于0.5,boolArray设置成10.5,boolArray设置成1。如果小于0.5,boolArray设置成-1
        boolArray[v] = 1;
    } else {
        boolArray[v] = -1;
    }
}
var bufferAttribute = new THREE.BufferAttribute(verticesArray, 1);
sphere.setAttribute('noise', bufferAttribute);

3. 设置着色器材质

var material = new THREE.ShaderMaterial({
    vertexShader: `
        attribute float noise;//着色器中定义noise属性
        varying vec3 vNormal;//定义两个varying属性,用于将顶点着色器中的属性传到片元着色器中
        varying vec3 vPosition;
        void main() {
            vNormal = normal;
            vPosition = position;
            vec3 newPosition = position + normal * noise;//这里比较重要,顶点坐标加上球面法向量乘以噪声,得到新的顶点坐标,新的坐标是和normal方向相同的。
            gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );
        }
    `,
    fragmentShader: `
        varying vec3 vPosition;
        varying vec3 vNormal;
        void main() {
            vec3 nml = (vNormal + 1.0) / 2.0;//这个使用了顶点坐标的法向量
            vec3 cy = vec3((sin(vPosition.y * 3.0) + 1.0) / 2.0);//这个使用了顶点坐标
            gl_FragColor=vec4(cy * nml, 1.0);//将两种效果结合起来(上面两种颜色你们不妨可以单个试一试哦)
        }
    `
});

4. 设置动态效果

上一篇我们使用了uniform传递了一个time值,这次我们另辟蹊径,在render方法中改变attribute属性。

for(var v = 0; v < count; v++) {
    if(verticesArray[v] < 10) {//如果噪声小于10,就将对应的boolArray变成1,然后累加
        boolArray[v] = 1;
        verticesArray[v] += 0.05;
    } else if(verticesArray[v] > 12) {//如果噪声大于12,就将对应的boolArray变成-1,然后累减
        boolArray[v] = -1;
        verticesArray[v] -= 0.05;
    } else if(boolArray[v] == 1) {//如果boolArray等于1,就继续累加
        verticesArray[v] += 0.05;
    } else {//如果boolArray等于-1,就继续累减
        verticesArray[v] -= 0.05;
    }
}
var bufferAttribute = new THREE.BufferAttribute(verticesArray, 1);
//更新noise属性值
mesh.geometry.setAttribute('noise', bufferAttribute);

这样就做成了案例上面的效果,是不是很有意思,我们可以做各种效果,说不上有心仪的效果。

转载请注明地址:郭先生的博客

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • three.js 将图片马赛克化

    这篇郭先生来说说BufferGeometry,类型化数组和粒子系统的使用,并且让图片有马赛克效果(同理可以让不清晰的图片清晰化),如图所示。在线案例点击图片马赛...

    郭先生的博客
  • three.js 材质

    今天郭先生说一说three.js的材质。材质描述了对象objects的外观。它们的定义方式与渲染器无关, 因此,如果您决定使用不同的渲染器,不必重写材质。

    郭先生的博客
  • three.js 制作逻辑转体游戏(下)

    上一篇已经对绕非定轴转动有所了解,这篇郭先生继续说一说逻辑转体游戏的制作,这部分我们同样会遇到一些小问题,首先是根据数据渲染陷阱和目标区域,然后是对可以转动的判...

    郭先生的博客
  • 0307前端笔试题

    2.制作级联菜单的时候,调用的是下拉列表的哪个事件? 解答: onChange()

    治电小白菜
  • Cordova插件须知

    ionic可以很方便的安装cordova插件,最新ionic-cli要求cordova插件里面有package.json和plugin.xml才能安装成功,如果...

    IT晴天
  • 摹客 PS 插件,支持自定切图尺寸!

    上图中是App设计中底部导航栏,开发希望每一个图标都能显示成相同大小,为此设计师往往需要费很大的精力去调整切图。摹客新增自定切图尺寸功能可以帮助你快速完成此类工...

    奔跑的小鹿
  • B2C商城系统开发使用java语言好不好?

    在这个网店十分普遍时代,网店系统是什么?网店系统有什么作用?什么样的java网上商城是好的?这些都是我们在建设B2C商城网店会思考的问题。Java开发语言是电商...

    Dorothy
  • 免代理下载安装纯净Chrome插件离线包

    Chrome的插件非常好用, 作者还为此在简书开了一个文集Chrome插件英雄榜, 用于详细介绍一些小众插件的使用方法

    zhaoolee
  • VS Code为什么能这么牛?

    Visual Studio Code(VS Code)近年来获得了爆炸式增长,成为广大开发者工具库中的必备神器。它作为一个开源项目,也吸引了无数第三方开发者和终...

    良月柒
  • VS Code 编辑器入门指南上篇-核心概念与组件

    如果当电脑只能装一个软件还需要尽量不影响日常学习工作时,不知道你的选择会是什么。我把这个看似「荒诞」的问题理解为「All-in-One」的升级版拷问。

    生信菜鸟团

扫码关注云+社区

领取腾讯云代金券