Babylon.js着色器简明简称【Shader】

在这里插入图片描述

推荐:用 NSDT设计器 快速搭建可编程3D场景

为了生成 BabylonJS 场景,需要用 Javascript 编写代码,BabylonJS 引擎会处理该代码并将结果显示在屏幕上。 场景可以通过改变网格、灯光或摄像机位置来改变。 为了及时显示可能的变化,屏幕显示(帧)以每秒 60 帧的速度重新绘制。

简化一下,流程就是

  • 场景代码由 BJS 引擎代码在 CPU 中处理以生成虚拟 3D 模型
  • 虚拟 3D 模型由 BJS 引擎代码在 CPU 中处理,生成 Shader GPU 代码
  • 着色器 GPU 代码由 GPU 处理以生成屏幕图像。

例如 BabylonJS 引擎采用此代码:

var box = BABYLON.MeshBuilder.CreateBox("box", {}, scene);

并将其转换为顶点数据,包括位置、颜色和法线

BabylonJS 引擎为此数据创建着色器代码并传递到 GPU。

不仅仅是这个以及场景代码,你还可以编写自己的用户着色器代码,该过程变得

场景代码由 BJS 引擎代码在 CPU 中处理以生成虚拟 3D 模型

  • 虚拟 3D 模型和用户着色器代码由 BJS 引擎代码在 CPU 中处理,生成着色器 GPU 代码
  • 着色器 GPU 代码由 GPU 处理以生成屏幕图像。

1、着色器的类型

着色器是用图形库着色器语言 (GLSL) 编写的,分为两部分。

  • 顶点着色器 - 它获取每个顶点的数据并确定其像素在屏幕上的显示位置及其颜色。
  • 片段着色器 - 使用来自顶点着色器的数据来确定代表网格每个面的像素的位置和颜色。

片段着色器有时称为像素着色器。
在这里插入图片描述

2、传递变量

位置、法线和 uv 坐标的顶点数据作为类别属性的变量传递给顶点着色器。 用户数据可以作为uniform类别的变量传递给顶点着色器和片段着色器。 数据可以从顶点着色器传递到片段着色器,其中变量类别不同。

在顶点着色器中声明的一个重要的统一变量是 worldViewProjection,因为 BabylonJS 引擎使用它来将场景 3D - 2D 投影数据传递到顶点着色器。
在这里插入图片描述

3、变量类型

两个着色器中使用的所有变量都必须指定一个类型,并且分配给该变量的任何数字都必须与其类型一致。

例如

int n = 2;
float r = 2.0;

下面的例子抛出一个错误

float r = 2;

类型的一些示例如下:

  • vec2 ------ 浮点数的二维向量
  • vec3 ------ 浮点数的三维向量
  • mat4 ------ 4列4行浮点数矩阵
  • Sampler2D - 2D 纹理图像

由于顶点位置需要尽可能准确,因此所有浮点数都应设置为具有高精度。 这是在每个着色器的代码开头使用 -

precision highp float

GLSL 语言有许多内置变量。 两个对于两个着色器的操作至关重要并且始终是必要的是:

  • gl_Position 提供屏幕坐标的位置数据
  • gl_FragColor 为屏幕上的构面表示提供颜色数据

4、函数

函数需要像其参数一样键入并具有以下形式

float NAME(typed parameters) {*code*
}

5、运行着色器代码

顶点着色器和片段着色器都从一个必须称为 main 且类型为 void 的函数运行,因为它不返回结果。 它还必须将空参数列表键入为 void。

void main(void) {*code*
}

在这里插入图片描述

6、将着色器代码放入 BabylonJS 中

以下是将着色器代码放入场景的四种方法:

  • 使用 BabylonJS Create Your Own Shader (CYOS) 并下载 zip 文件
  • 将顶点和片段着色器代码写入

原文链接:Babylon.js着色器简介 — BimAnt

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/29954.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JS实现数组扁平化的 8 种方式

八种数组扁平化方法的使用场景和优缺点 以下是八种数组扁平化方法的使用场景和优缺点: 1. 使用递归: 使用场景:当需要对任意层级的嵌套数组进行扁平化时,递归是一种简单且通用的方法。优点:简单易懂,适用…

【架构设计】如何设计一个高性能短链系统

一、前言 所谓系统设计,就是给一个场景,让你给出对应的架构设计,需要考虑哪些问题,采用什么方案解决。很多面试官喜欢出这么一道题来考验你的知识广度和逻辑思考能力。 虽然各个系统千差万别,但是设计思想基本一致&a…

【考研复习】24王道数据结构课后习题代码|2.3线性表的链式表示

文章目录 总结01 递归删除结点02 删除结点03 反向输出04 删除最小值05 逆置06 链表递增排序07 删除区间值08 找公共结点09 增序输出链表10 拆分链表--尾插11 拆分链表--头插12 删除相同元素13 合并链表14 生成含有公共元素的链表C15 求并集16 判断子序列17 判断循环链表是否对称…

Android Studio实现刮刮卡效果

代码和刮刮乐图片参考网络 实现效果 MainActivity import android.app.Activity; import android.os.Bundle;public class MainActivity extends Activity {Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentVi…

ruoyi-cloud微服务新建子模块

ruoyi-cloud微服务新建子模块 1、复制system模块 直接复制 modules下面已有的system模块,改名为 test 2、在modules下的 pom.xml文件中添加子模块 3、进入 test模块修改 pom.xml 把原有的system 修改成test 4、修改对应的包名、目录名和启动应用程序为test 5、修…

大学生口才培训需求分析

标题:大学生口才培训需求分析 摘要: 本论文旨在分析大学生口才培训的需求,通过对大学生口才培训的重要性、现状和挑战进行研究,并结合相关理论和实践经验,提出相应的培训需求和解决方案。通过本论文的研究&#xff0c…

介绍另外一个容器技术, Apptainer

一说到容器,我们往往会脱口而出, Docker, 实际上Docker 仅仅是Linux 容器化的一种, 今天介绍的Apptainer 就是另外一种容器技术。 那么Apptainer 具体是一个什么东西呢? 跟Docker 有什么区别呢? 首先&#…

【HarmonyOS】Java如何引用外部jar包

【关键字】 Java、引用jar包​ 【写在前面】 使用API6和API7开发HarmonyOS应用时,因为应用中只能引用SDK中开放的功能接口,但是部分jdk自带的接口功能在SDK中并未封装,要想在工程中使用jdk开放的接口功能,需要将jdk中的jar包通过…

Docker cp(CVE-2019-14271)漏洞复现与分析

安装 metarget安装有点问题,所以我们直接指定安装 可以用下面命令 查看包 apt-cache madison docker-ce 安装 apt-get install -y docker-ce5:19.03.0~3-0~ubuntu-bionic 原理 EXP metarget/writeups_cnv/docker-cve-2019-14271 at master Metarget/metarget G…

【TS第三讲】完善TS开发环境

文章目录 🌟 写在前面🌟 ts-node🌟 nodemon🌟 nodemon文件类型🌟 nodemon文件范围🌟 写在最后 🌟 写在前面 🔥探索TypeScript世界,驭Vue3Ts潮流,开启前端之旅…

STM32--综述

文章目录 前言STM32简介STM32F103C8T6系统结构Keil软件安装注意事项新建工程操作流程 前言 本专栏将学习B站江协科技的STM32入门教程,通过自身理解和对老师的总结所写的博客专栏。 STM32简介 STM32是意法半导体(STMicroelectronics)公司推…

香山处理器跑仿真和跑FPGA两套环境配置过程小结

裸机ubuntu18.04上运行香山处理器(南湖)make verilog system program problem detected - sudo vi /etc/default/apport sudo apt install tree git cmake curl sudo apt install bison flex sudo apt install verilator sudo apt install default-jr…

intelJ IDEA\PHPStorm \WebStorm\PyCharm 通过ssh连接远程Mysql\Postgresql等数据库

最容易出错的地方是在general面板下的host,不应该填真实的host地址,而应该填localhost或者127.0.0.1 具体操作步骤见下图

Shopify平台Fulfillment业务模块升级

上图是销售订单、发货单与配送之间的关系图,销售订单可以创建多个发货单,多个发货单(不同销售订单)可以合并在一个配送订单进行发货 接口请求错误记录: 1. The api_client does not have the required permission(s). 2. Required parameter missing or…

特殊符号的制作 台风 示例 使用第三方工具 Photoshop 地理信息系统空间分析实验教程 第三版

特殊符号的制作 首先这是一个含有字符的,使用arcgis自带的符号编辑器制作比较困难。所以我们准备采用Adobe Photoshop 来进行制作符号,然后直接导入符号的图片文件作为符号 我们打开ps,根据上面的图片的像素长宽比,设定合适的高度…

FastAPI和Flask:构建RESTful API的比较分析

Python 是一种功能强大的编程语言,广泛应用于 Web 开发领域。FastAPI 和 Flask 是 Python Web 开发中最受欢迎的两个框架。本文将对 FastAPI 和 Flask 进行综合对比,探讨它们在语法和表达能力、生态系统和社区支持、性能和扩展性、开发工具和调试支持、安…

优橙内推黑龙江专场——5G网络优化(中高级)工程师

可加入就业QQ群:801549240 联系老师内推简历投递邮箱:hrictyc.com 内推公司1:中富通集团股份有限公司 内推公司2:北京电旗通讯技术股份有限公司 内推公司3:元道通信股份有限公司 中富通集团股份有限公司 中富通股…

ROS2系统学习番外篇2---用VSCode开发ROS2程序

在ROS2系统学习3—第一个“Hello World”程序—即工作空间创建与包创建中已经介绍了如何创建ROS的工作空间以及包。在开发大型工程时,往往需要在IDE下面进行开发,因此本篇介绍使用VSCode来搭建ROS2开发环境的方法。 首先用VSCode打开ROS2的工作空间。 使用快捷键编译ROS2 …

【springboot项目】在idea中启动报错合集

一、IDEA中报错 “Error running ‘Application‘: Command line is too long.“ 的解决办法 报错详情: Error running Application: Command line is too long.Shorten command line for Application or also for Spring Boot default configuration.报错原因&am…

Linux 目录结构

初学Linux,首先需要弄清Linux 标准目录结构 / root --- 启动Linux时使用的一些核心文件。如操作系统内核、引导程序Grub等。home --- 存储普通用户的个人文件 ftp --- 用户所有服务httpdsambauser1user2bin --- 系统启动时需要的执行文件(二进制&#x…