专栏首页郭先生的博客three.js 着色器材质之纹理

three.js 着色器材质之纹理

今天郭先生说一说如何在three.js着色器中添加纹理,先看看今天要完成的效果,在线案例请点击着色器纹理

捕57获.PNG

这里我们分别引入三个纹理,分别是地球的表面纹理,对应的海拔灰度图,和云朵的纹理。使用表面纹理还是地球的外貌,海拔灰度图给地球添加凹凸效果,云朵纹理给地球添加云朵效果。下面我们说一说代码。

1. 绘制几何体,加载贴图

我们只需要在一个球体中进行操作,所以新建一个球体。然后分别加载三张纹理。

var sphere = new THREE.SphereBufferGeometry(10, 128, 64);
var texture1 = new THREE.TextureLoader().load('/static/images/texture/planets/diqiu-s.jpg');
var texture2 = new THREE.TextureLoader().load('/static/images/texture/planets/dixing.jpg');
var texture3 = new THREE.TextureLoader().load('/static/images/base/water.jpg');

2. 使用uniform变量

这里除了将三张纹理传到着色器中,还传递了一个时间,这个时间来让纹理动起来。云朵的纹理的wrapS和wrapT设置成THREE.RepeatWrapping,这是让纹理简单地重复到无穷大,而不至于0,0到1,1的范围。

uniforms = {
    time: {
        value: 0
    },
    texture1: {
        value: texture1
    },
    texture2: {
        value: texture2
    },
    texture3: {
        value: texture3
    },
}
uniforms[ "texture3" ].value.wrapS = uniforms[ "texture3" ].value.wrapT = THREE.RepeatWrapping;

3. 顶点着色器

顶点着色器我们只是用地球的灰度图,这里面是用texture2D( texture2, vUv )来获取图片中每个点的颜色值。新建三维向量newPosition,这个向量代表球体上的点经过灰度贴图操作后新点的位置。由于是灰度图,那么他的r,g,b应该是相同的,并且保证新的顶点坐标是沿着球表面法向量方向,所以vec3 newPosition = position + normal * tcolor.r / 2.0;

vertexShader: `
    varying vec2 vUv;
    uniform sampler2D texture2;
    void main() {
        vUv = uv;
        vec4 tcolor = texture2D( texture2, vUv );
        vec3 newPosition = position + normal * tcolor.r / 2.0;
        gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );
    }
`

4. 片元着色器

片元着色器使用两个纹理,还是顶点着色器传过来的uv以及时间。这里tcolor1就是地图点的颜色,tcolor3代表云朵的纹理,但是他的uv是随时间变化的(这里要求纹理设置重复)。这里还是用了mix方法,mix方法返回线性混合的x和y,如:x(1−a)+ya。

fragmentShader: `
    varying vec2 vUv;
    uniform sampler2D texture1;
    uniform sampler2D texture3;
    uniform float time;
    void main() {
        vec4 tcolor1 = texture2D( texture1, vUv );
        vec4 tcolor3 = texture2D( texture3, vUv - vec2(time, - time * 0.4) );
        gl_FragColor = mix(tcolor1, tcolor3 * 1.3, tcolor3.r / 2.0);
    }
`

这样就获得了一个动态的地球。是不是很简单呢?

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • three.js 着色器材质之初识着色器

    说起three.js,着色器材质总是绕不过的话题,今天郭先生就说一说什么是着色器材质。着色器材质是很需要灵感和数学知识的,可以用简短的代码和绘制出十分丰富的图像...

    郭先生的博客
  • three.js 着色器材质之变量(一)

    上一篇说顶点着色器和片元着色器的皮毛,这篇郭先生说一说着色器变量,通过变量可以设置材质。先看看今天要做的如下图。在线案例请点击红绿灯。

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

    这篇郭先生在练习一下着色器变量,在度娘上面或者官网上经常看到类似水波一样的效果,这篇就试着做一个这样的效果,顺便巩固一下顶点着色器和片元着色器,毕竟多多练习才能...

    郭先生的博客
  • 《WCF技术剖析(卷2)》目录

    第1章 异常处理 (Exception Handling) 1.1. WCF基本异常处理模式 1.1.1. 当异常从服务端抛出(S101) 1.1.2. 异常细...

    蒋金楠
  • maven发布版本:解决因为javadoc编译报错导致执行release:prepare失败

    我们知道发布maven项目比较简单,执行maven-release-plugin插件就可以了。 最近在调用mvn release:prepare做发布准备时,...

    用户1148648
  • 服务网格仍然很难

    北美KubeCon + CloudNativeCon虚拟大会赞助商客座文章作者:Lin Sun,IBM高级技术人员

    CNCF
  • [ASP.NET Core 3框架揭秘] 配置[6]:多样化的配置源[上篇]

    .NET Core采用的这个全新的配置模型的一个主要的特点就是对多种不同配置源的支持。我们可以将内存变量、命令行参数、环境变量和物理文件作为原始配置数据的来源。...

    蒋金楠
  • uni-app学习(四)好用的插件2

    老梁
  • File 类基础解析3 文件过滤器优化

    java.io.FileFilter 是一个接口,是File的过滤器。 该接口的对象可以传递给File类的 listFiles(FileFilter) 作为参数...

    一只胡说八道的猴子
  • Java IO学习笔记一

    爱撒谎的男孩

扫码关注云+社区

领取腾讯云代金券