什么是着色器/Threejs如何使用着色器/Threejs使用着色器实现平面网格的动态效果案例
1,什么是着色器
着色器(Shader)是计算机图形学中的一个重要概念,它是在 GPU 上运行的程序,用于计算三维场景中每个像素的颜色和其他属性。
着色器通常分为两种类型:顶点着色器和片元着色器。顶点着色器主要用于对每个顶点进行操作,将其变换到最终渲染的位置,并将一些属性传递到片元着色器中。片元着色器主要用于对每个像素进行操作,计算像素的颜色值,并返回给渲染引擎。
着色器可以帮助我们实现许多高级渲染效果,如阴影、光照、纹理、模糊、反射、折射等等。通过编写自定义的着色器程序,我们可以控制图形中的每一个像素的颜色和属性,从而创建更加逼真和高效的渲染效果。
在 web 开发中,着色器通常使用 WebGL 技术来实现。three.js 是一个流行的 WebGL 库,它提供了一套易用的 API 和内置的着色器,使得开发者可以轻松地实现各种高级的渲染效果。
2,Three.js 着色器示例
下面代码中,顶点着色器和片元着色器的代码都是 GLSL 语言编写的。顶点着色器主要是对每个顶点进行操作,将其变换到最终渲染的位置,并将一些属性传递到片元着色器中。片元着色器主要是对每个像素进行操作,计算像素的颜色值,并返回给渲染引擎。
顶点着色器代码中,varying 变量 vPosition 用于将顶点位置从顶点着色器传递到片元着色器。modelViewMatrix 和 projectionMatrix 是 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…...

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式
一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明:假设每台服务器已…...
应用升级/灾备测试时使用guarantee 闪回点迅速回退
1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间, 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点,不需要开启数据库闪回。…...
c++ 面试题(1)-----深度优先搜索(DFS)实现
操作系统:ubuntu22.04 IDE:Visual Studio Code 编程语言:C11 题目描述 地上有一个 m 行 n 列的方格,从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子,但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式
今天是关于AI如何在教学中增强学生的学习体验,我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育,这并非炒作,而是已经发生的巨大变革。教育机构和教育者不能忽视它,试图简单地禁止学生使…...

02.运算符
目录 什么是运算符 算术运算符 1.基本四则运算符 2.增量运算符 3.自增/自减运算符 关系运算符 逻辑运算符 &&:逻辑与 ||:逻辑或 !:逻辑非 短路求值 位运算符 按位与&: 按位或 | 按位取反~ …...

如何把工业通信协议转换成http websocket
1.现状 工业通信协议多数工作在边缘设备上,比如:PLC、IOT盒子等。上层业务系统需要根据不同的工业协议做对应开发,当设备上用的是modbus从站时,采集设备数据需要开发modbus主站;当设备上用的是西门子PN协议时…...
Java多线程实现之Runnable接口深度解析
Java多线程实现之Runnable接口深度解析 一、Runnable接口概述1.1 接口定义1.2 与Thread类的关系1.3 使用Runnable接口的优势 二、Runnable接口的基本实现方式2.1 传统方式实现Runnable接口2.2 使用匿名内部类实现Runnable接口2.3 使用Lambda表达式实现Runnable接口 三、Runnabl…...
【向量库】Weaviate 搜索与索引技术:从基础概念到性能优化
文章目录 零、概述一、搜索技术分类1. 向量搜索:捕捉语义的智能检索2. 关键字搜索:精确匹配的传统方案3. 混合搜索:语义与精确的双重保障 二、向量检索技术分类1. HNSW索引:大规模数据的高效引擎2. Flat索引:小规模数据…...

LangChain + LangSmith + DeepSeek 入门实战:构建代码生成助手
本文基于 Jupyter Notebook 实践代码,结合 LangChain、LangSmith 和 DeepSeek 大模型,手把手演示如何构建一个代码生成助手,并实现全流程追踪与优化。 一、环境准备与配置 1. 安装依赖 pip install langchain langchain_openai2. 设置环境变…...
湖北理元理律师事务所:债务清偿方案中的法律技术革新
文/金融法律研究组 当前债务服务市场存在结构性矛盾:债权人追求快速回款,债务人需要喘息空间。湖北理元理律师事务所通过创新法律技术,在《企业破产法》《民法典》框架下构建梯度清偿模型,实现多方利益平衡。 一、个人债务优化的…...