当前位置: 首页 > news >正文

什么是着色器/Threejs如何使用着色器/Threejs使用着色器实现平面网格的动态效果案例

1,什么是着色器

着色器(Shader)是计算机图形学中的一个重要概念,它是在 GPU 上运行的程序,用于计算三维场景中每个像素的颜色和其他属性。

着色器通常分为两种类型:顶点着色器和片元着色器。顶点着色器主要用于对每个顶点进行操作,将其变换到最终渲染的位置,并将一些属性传递到片元着色器中。片元着色器主要用于对每个像素进行操作,计算像素的颜色值,并返回给渲染引擎。

着色器可以帮助我们实现许多高级渲染效果,如阴影、光照、纹理、模糊、反射、折射等等。通过编写自定义的着色器程序,我们可以控制图形中的每一个像素的颜色和属性,从而创建更加逼真和高效的渲染效果。

在 web 开发中,着色器通常使用 WebGL 技术来实现。three.js 是一个流行的 WebGL 库,它提供了一套易用的 API 和内置的着色器,使得开发者可以轻松地实现各种高级的渲染效果。

2,Three.js 着色器示例

下面代码中,顶点着色器和片元着色器的代码都是 GLSL 语言编写的。顶点着色器主要是对每个顶点进行操作,将其变换到最终渲染的位置,并将一些属性传递到片元着色器中。片元着色器主要是对每个像素进行操作,计算像素的颜色值,并返回给渲染引擎。

顶点着色器代码中,varying 变量 vPosition 用于将顶点位置从顶点着色器传递到片元着色器。modelViewMatrixprojectionMatrix 是 three.js 中的内置变量,分别用于将顶点从模型空间转换到视图空间和投影空间。gl_Position 变量表示当前顶点在最终屏幕空间的位置。

片元着色器代码中,varying 变量 vPosition 是从顶点着色器传递过来的。gl_FragColor 变量表示当前像素的颜色值,用于将最终的颜色输出到屏幕上。

在最后,我们通过将着色器材质应用于网格对象来应用着色器。这个着色器使用了我们编写的顶点着色器和片元着色器。

// 顶点着色器代码
const vertexShader = `// 顶点位置,传递到片元着色器varying vec3 vPosition;void main() {// 顶点位置vec4 modelViewPosition = modelViewMatrix * vec4(position, 1.0);// 计算顶点位置gl_Position = projectionMatrix * modelViewPosition;// 将顶点位置传递到片元着色器vPosition = position;}
`;// 片元着色器代码
const fragmentShader = `// 从顶点着色器传递的顶点位置varying vec3 vPosition;void main() {// 将颜色设置为红色gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);}
`;// 创建着色器材质
const material = new THREE.ShaderMaterial({vertexShader,fragmentShader,
});// 创建网格对象并应用着色器材质
const geometry = new THREE.BoxGeometry();
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

3,Three.js使用着色器实现控制平面网格的动态效果案例

这个案例使用了一个顶点着色器和一个片元着色器来控制平面网格的动态效果。顶点着色器中计算了一个位移量,根据时间和顶点的位置来更新顶点的位置,实现了网格的动态效果;片元着色器中输出了一个纯色,用来渲染网格的颜色。在渲染循环中,通过更新uniform变量来控制网格的动态效果。

// 创建一个平面几何体
var geometry = new THREE.PlaneGeometry(5, 5, 5, 5);// 创建一个着色器材质
var material = new THREE.ShaderMaterial({uniforms: {time: { value: 0.0 }, // 时间amplitude: { value: 1.0 }, // 振幅color: { value: new THREE.Color(0xff0000) } // 颜色},vertexShader: `uniform float time;uniform float amplitude;// 顶点着色器函数void main() {vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);gl_Position = projectionMatrix * mvPosition;// 计算位移float displacement = amplitude * sin(time + mvPosition.y);// 更新顶点位置mvPosition.y += displacement;// 输出新位置gl_Position = projectionMatrix * mvPosition;}`,fragmentShader: `uniform vec3 color;// 片元着色器函数void main() {gl_FragColor = vec4(color, 1.0);}`
});// 创建一个平面网格
var mesh = new THREE.Mesh(geometry, material);// 将平面网格添加到场景中
scene.add(mesh);// 在渲染循环中更新uniform变量
function animate() {requestAnimationFrame(animate);var time = Date.now() * 0.001; // 获取当前时间material.uniforms.time.value = time; // 更新时间mesh.rotation.x += 0.01; // 旋转平面网格mesh.rotation.y += 0.02;renderer.render(scene, camera);
}
animate();

相关文章:

什么是着色器/Threejs如何使用着色器/Threejs使用着色器实现平面网格的动态效果案例

1,什么是着色器着色器(Shader)是计算机图形学中的一个重要概念,它是在 GPU 上运行的程序,用于计算三维场景中每个像素的颜色和其他属性。着色器通常分为两种类型:顶点着色器和片元着色器。顶点着色器主要用…...

191、【动态规划】AcWing ——AcWing 900. 整数划分:完全背包解法+加减1解法(C++版本)

题目描述 参考文章:900. 整数划分 解题思路 因为本题中规定了数字从大到小,其实也就是不论是1 2 1 4,还是2 1 1 4,都会被看作是2 1 1 4这一种情况,因此本题是在遍历中不考虑结果顺序。 背包问题中只需考虑…...

Java 比较器

public interface Comparable Comparable 接口位于 java.lang 包下,对实现它的每个类的对象强加一个总排序,这种排序被称为类的自然顺序,compareTo 方法被称为其自然比较方法。 实现此接口的对象的列表(和数组)可以由…...

配置本地 python GEE、geemap环境

1.安装anconda 百度搜索anconda清华镜像,从清华镜像中选择最新的anconda安装包,国内镜像网站下载速度较快,如果从国外官网下载速度相当慢,详细安装教程请参考: anconda安装教程https://blog.csdn.net/lwbCUMT/article…...

cmd命令教程

小提示: 在本文中,我将向您展示可以在 Windows 命令行上使用的 40 个命令 温馨提示:在本教程中学习使用适用于 Windows 10 和 CMD 网络命令的最常见基本 CMD 命令及其语法和示例 文章目录为什么命令提示符有用一、cmd是什么?如何在…...

深圳大学计软《面向对象的程序设计》实验15 函数模板和类模板

A. 有界数组模板类(类模板) 题目描述 编写有界数组模板BoundArray(即检查对数组元素下标引用并在下标越界时终止程序的执行),能够存储各种类型的数据。要求实现对数组进行排序的方法sort,及对数组进行查找…...

组播详解及示例代码

写在前面 由于公司业务需要用到组播实现,这里就记录下学习过程。在学习组播之前,我们先来看看另外两种数据包传输方式:单播和广播。 单播:简单来说就是数据一对一发送,如果需要给多个主机发送数据时,就需…...

C语言-qsort函数示例解析

一.qsort函数是什么stdlib.h头文件下的函数qsort()函数:是八大排序算法中的快速排序,能够排序任意数据类型的数组其中包括整形,浮点型,字符串甚至还有自定义的结构体类型。qsort函数实现对不同元素的排序主要就是通过对compar函数…...

一些Linux内核内存性能调优笔记!

前言 在工作生活中,我们时常会遇到一些性能问题:比如手机用久了,在滑动窗口或点击 APP 时会出现页面反应慢、卡顿等情况;比如运行在某台服务器上进程的某些性能指标(影响用户体验的 PCT99 指标等)不达预期…...

【JVM】逃逸分析

开发者都知道,基本上所有对象都是在堆上创建。但是,这里还是没有把话说绝对哈,指的是基本上所有。昨天一位朋友在聊天中,就说了所有对象都在堆中创建,然后被朋友一阵的嘲笑。 开始我们的正文,我们今天来聊聊…...

C51---震动传感器控制LED灯亮灭

1.example #include "reg52.h" sbit led1 P3^7;//原理图中led1指向P3组IO口的P3.7口 sbit vibrate P3^3;//Do接到了P3.3口 void Delay3000ms() //11.0592MHz { unsigned char i, j, k; //_nop_(); i 22; j 3; k 227; do { …...

使用 JaCoCo 生成测试覆盖率报告

0、为什么要生成测试覆盖率报告 在我们实际的工作中,当完成程序的开发后,需要提交给测试人员进行测试,经过测试人员测试后,代码才能上线到生产环境。 有个问题是:怎么能证明程序得到了充分的测试,程序中所…...

windows下neo4j安装及配置,并绘制人物关系图谱

neo4j安装及配置,绘制人物关系图谱 先升级pip,安装py2neo pip install py2neo2021.0.1依赖 jdk1.8, neo4j 3.xx; 或者jdk18,neo4j 4.x,5.x; 官网下载了neo4j4.x,5.x 因为jdk版本原因都不行&am…...

【Spring6】IoC容器之基于XML管理Bean

3、容器:IoC IoC 是 Inversion of Control 的简写,译为“控制反转”,它不是一门技术,而是一种设计思想,是一个重要的面向对象编程法则,能够指导我们如何设计出松耦合、更优良的程序。 Spring 通过 IoC 容…...

Warshall算法求传递闭包及Python编程的实现

弗洛伊德算法-Floyd(Floyd-Warshall)-求多源最短路径,求传递闭包 Floyd算法又称为插点法,是一种利用动态规划的思想寻找给定的加权图中多源点之间最短路径的算法, 与Dijkstra算法类似。该算法名称以创始人之一、1978年图灵奖获得者、斯坦福大…...

AcWing第 93 场周赛

4867. 整除数 给定两个整数 n,k,请你找到大于 n 且能被 k 整除的最小整数 x。 输入格式 共一行,包含两个整数 n,k。 输出格式 输出大于 n 且能被 k 整除的最小整数 x。 数据范围 前 4 个测试点满足 1≤n,k≤100。 所有测试点满足 1≤n,k≤109。 …...

计及需求响应的粒子群算法求解风能、光伏、柴油机、储能容量优化配置(Matlab代码实现)

👨‍🎓个人主页:研学社的博客💥💥💞💞欢迎来到本博客❤️❤️💥💥🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密…...

利用Nginx给RStudio-Server配置https

前篇文档,我这边写了安装RStudio-Server的方法。默认是http的访问方式,现在我们需要将其改成https的访问方式。 1、给服务器安装Nginx:参照之前的安装Nginx的方法。 2、创建/usr/local/nginx/ssl目录: mkdir /usr/local/nginx/ss…...

YOLOv7实验记录

这篇博客主要记录博主在做YOLOv7模型训练与测试过程中遇到的一些问题。 首先我们需要明确YOLO模型权重文件与模型文件的使用 其实在github的readme中已经告诉我们使用方法,但我相信有很多像博主一样眼高手低的人可能会犯类似的错误。 训练 首先是训练时的设置&…...

用Python获取史瓦西时空中克氏符的分量

文章目录三维球面坐标史瓦西时空三维球面坐标 Einsteinpy中提供了克氏符模型,可通过ChristoffelSymbols获取。简单起见,先以最直观的三维球面为例,来用Einsteinpy查看其克氏符的表达形式。 三维球面的度规张量可表示为 g001g11r2g22r2sin⁡…...

微信小程序之bind和catch

这两个呢,都是绑定事件用的,具体使用有些小区别。 官方文档: 事件冒泡处理不同 bind:绑定的事件会向上冒泡,即触发当前组件的事件后,还会继续触发父组件的相同事件。例如,有一个子视图绑定了b…...

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

嵌入式学习笔记DAY33(网络编程——TCP)

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

Proxmox Mail Gateway安装指南:从零开始配置高效邮件过滤系统

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storms…...

高防服务器价格高原因分析

高防服务器的价格较高&#xff0c;主要是由于其特殊的防御机制、硬件配置、运营维护等多方面的综合成本。以下从技术、资源和服务三个维度详细解析高防服务器昂贵的原因&#xff1a; 一、硬件与技术投入 大带宽需求 DDoS攻击通过占用大量带宽资源瘫痪目标服务器&#xff0c;因此…...