WebGL着色器GLSL基本数据类型

第二节 WebGL中着色器语言(GLSL ES)的简介 学习交流欢迎加群:789723098,博主会将一些demo整理共享 1 着色器简介 着色器语言(GLSL ES)由OpenGL的着色器语言GLSL简化而来, 主要是为了适应目前的移动端手持设备,例如智能手机和平板电脑,由于这些手持设备受限于硬件条件,其性能远不如电脑。这意味着对这些手持设备硬件的利用和开销就要恰到好处,故由此催生了GLSL ES,是为了降低硬件的功耗和性能开销。具体的着色器技术... 阅读详情

WebGL着色器GLSL基本数据类型

本文是WebGL教程(电子书)的2.3节内容

着色器语言GLSL的基本数据类型和C语言一样具有常见的整型数int、浮点数float和布尔值bool类型数据。

关键字数据类型值
bool布尔值布尔变量值为true或false
int整型数值为整数,比如0,1,2,3…
float单精度浮点数浮点数用小数点表示,比如0.6,3.14,2.8
// bool关键字声明一个数据类型是布尔值的变量,并赋值为true
bool lightBool = true;
// 改变变量的值
lightBool = false;
// 着色器语言定义一个整形常量
int count = 10;
// 改变变量count的值
count = 20;
// 定义一个浮点数变量num,并赋值10.0
float num = 10.0;

-注意:编程的时候,如果浮点数刚好是0、1等整数值,要注意书写为0.0,1.0,不能省略点,如果直接写0、1等形式,系统会识别为整型数,进行运算的过程中,如果把数据类型搞错可能会报错。

错误赋值方式

float num = 1;

正确赋值方式

float num = 1.0;

赋值

声明可以一个变量,可以先声明后复制,也可以声明的时候直接赋值

// 定义一个浮点数变量
float num = 10.0;
// 给变量赋值10.0
num = 10.0;
// 声明变量的同时赋值
float num = 10.0;

数据类型转换

整型数int、浮点数float、布尔值bool三种不同的数据值可以相互转化,把一个类型转化为另一个类型通过相应的内置函数int()、float()、bool()实现。

转化函数规则
浮点数转整型数int(10.1)直接把浮点数部分去掉,10.1转化为10
整型数转浮点数float(10)整型数直接转化为浮点数10.0
数子转布尔值bool(10)0或0.0转化为false,非0或非0.0转化为true
布尔值转整型数int(true)false转化为0,true转化为1
布尔值转浮点数float(true)false转化为0.0,true转化为1.0
//声明一个整型数变量num,并赋值1
int num = 1;
// 整型数num转化为浮点数fnum
float fnum = float(num);
//声明一个浮点数变量fnum,并赋值1.0
float fnum = 1.08;
// 浮点数转化整型数
int inum = int(num);//转化结果1
StarshipShader: WebGL星际粒子效果着色器详解 StarshipShader是一个封装好的JavaScript类,它简化了创建星际粒子效果的过程。这个组件封装了WebGL的复杂性,提供了简单的API来初始化、启动、暂停和调整效果。完全基于WebGL,性能优异自适应画布大小,支持响应式设计可配置的参数,如自动启动、自动调整大小等优化的渲染循环,支持暂停/恢复功能当元素不可见时自动暂停,节省资源// 如果传入的是ID,获取元素// 默认选项...options// 状态变量// ...其他变量canvas。 阅读详情

相关推荐

学习threejs,使用自定义GLSL 着色器,实现水面、粒子特效

本文详细介绍如何基于threejs在三维场景中使用自定义GLSL 着色器,实现水面、粒子特效。亲测可用。希望能帮助到您。一起学习,加油!加油!

我哎GIS博客 1096

Cocos Shader 基础入门(一):WebGL 着色器与 GLSL 着色器语言基础

引言:Shader(可编程着色器)是用来实现图像渲染的可编辑程序。它并不是简单的计算机应用,要想真正地掌握 Shader,需要对图形学、图形 API、GPU、显卡等都有个宏观概念。而对大多数游戏开发者来说,“快速”入门又是当下的迫切需求。因此,Cocos 布道师放空整理了一个Cocos Shader 基础系列教程(8期入门+2期扩展),介绍 Shader 的基础知识以及在 Cocos Creat...

Cocos的博客 688

原生webgl学习(一) 原生WebGL学习和入门引言

一.笔者自述         对于原生WebGL的学习,相信对于很多搞前端图形开发的小伙伴的痛点是花了很多时间,却收效甚微;好在现在存在诸如Three.js、Babylon.js、cesium.js等功能强大和齐全的WebGL第三方库;有了这些第三方库,我们可以用更少的代码构建出绚丽多彩的网络3D应用;那为什么我们还要学习原生的WebGL,原生的WebGL对于我们来说意味着什么?接下来笔者就以自...

Bruce_wjh的博客 1万+

GLSL ES 语言—变量数值类型

数值类型GLSL 支持两种数据值类型:数据类型:整数(比如:0、1、2)和浮点数(比如:3.14、29.98)。没有小数点(.)的值被认为是整数,而有小数点的值则被认为是...

奎特尔星球 479

带你快速入门webgl与shader着色器渲染基础

webgl的初见(二维) 你是谁? WebGL经常被当成3D API,人们总想“我可以使用WebGL和一些神奇的东西做出炫酷的3D作品”。 事实上WebGL仅仅是一个光栅化引擎,它可以根据你的代码绘制出点,线和三角形。 想要利用WebGL完成更复杂任务,取决于你能否提供合适的代码,组合使用点,线和三角形代替实现。 WebGL在电脑的GPU中运行。因此你需要使用能够在GPU上运行的代码。 这样的代码需要提供成对的方法。每对方法中一个叫顶点着色器, 另一个叫片断着色器,并且使用一种和C或C++类似的强类型的语

gdutRex的博客 3526

雾化器硬件设计:从N155驱动到PCB可量产实现

雾化器是典型的机电一体化嵌入式终端,其硬件设计本质是电源完整性、信号完整性与热-机械协同的系统工程。核心在于理解高压脉冲驱动原理(如2.4MHz固定频率匹配压电谐振)、电源域隔离机制(AGND/DGND/PGND分域设计)及约束驱动的PCB转化逻辑。技术价值体现在电气可靠性(如OTP/OLP保护)、生产可制造性(DFM合规焊盘与钢网)与环境鲁棒性(三防漆、散热过孔)。典型应用场景覆盖加湿器、医疗雾化仪与工业微流控设备。本文聚焦超声波雾化控制板的硬线实现路径,深入解析N155驱动芯片选型、网络标签工程误用陷阱

weixin_35649491的博客 608

GLSL学习(一):基本数据类型

类型关键字语法示例说明intint 变量名int a整型变量floatfloat 变量名float a浮点型变量boolbool 变量名bool a布尔型变量vecvec 变量名vec2 a向量(vec2/vec3/vec4)

奇怪的人类 1883

【没有网络,安装python包】如何从 PyPI 下载并安装 Plotly 的离线包

在某些情况下,您可能需要在没有互联网连接的环境中安装 Python 包,例如在飞机上、在某些受限制的网络环境中或在需要离线安装的场景下。以下是如何在 PyPI(Python Package Index)下载 Plotly 包并进行离线安装的详细步骤。

赖德发的博客 1095

高级GLSL简介

一、简介 GLSL(GL Shading Language)的着色器代码分成2个部分:Vertex Shader(顶点着色器)和Fragment(片断着色器),有时还会有Geometry Shader(几何着色器)。负责运行顶点着色的是顶点着色器。它可以得到当前OpenGL 中的状态,GLSL内置变量进行传递。GLSL其使用C语言作为基础高阶着色语言,避免了使用汇编语言或硬件规格语言的复杂性。 二...

weixin_38498942的博客 456

瑞芯微RK3588开发板VSCode远程开发全攻略:从SSH配置到插件优化

本文详细介绍了如何在瑞芯微RK3588开发板上配置VSCode远程开发环境。从Ubuntu系统下的SSH服务设置、VSCode Remote-SSH扩展安装,到连接建立、基础工具链部署,再到针对ARM平台的性能优化与调试配置,提供了一套完整的实战指南,帮助开发者高效利用本地资源进行嵌入式开发。

weixin_28831341的博客 617

先进封装Interposer仿真步骤及说明

摘要: Interposer仿真是2.5D/3DIC封装设计的关键环节,涵盖信号完整性(SI)、电源完整性(PI)、热及结构应力分析。流程分为五个阶段:1)前处理,定义层叠结构与材料属性;2)参数提取,通过3D电磁建模获取TSV、传输线等寄生参数;3)仿真设置,选择求解器并设定频率范围;4)结果分析,评估信号损耗、阻抗及电源网络性能;5)后处理,进行多物理场协同仿真并生成模型。核心挑战在于多尺度与多物理场耦合,需优先确保高速信号与电源网络的仿真精度。常用工具包括Ansys HFSS、Cadence Sigr

DSY_0324的博客 1325

关于 shader 计算精度丢失问题的解决|WebGL地图引擎系列第四期

关于 shader 计算精度丢失问题的解决|WebGL地图引擎系列第四期   作者:J大多数 GPU 只支持32位浮点数,因此在 GLSL(OpenGL Shading Language) 中使用 32bit 浮点数,当计算较大数值时会出现精度丢失的问题。矩阵精度丢失问题和解决在地图场景中,道路、绿地、水系这些元素的坐标是相对于一个网格的,因此坐标基本在0到256之间,在进行坐标转换时,程序将相对...

百度地图开放平台的博客 3912

瑞芯微RK3588系统重装实战:从Windows到Linux的完整烧录指南

本文提供了一份详尽的瑞芯微RK3588开发板系统重装实战指南,涵盖从Windows到Linux双平台的完整烧录流程。针对RK3588芯片特性,详细解析了驱动安装、工具使用、固件烧录步骤及常见问题排错,旨在帮助开发者高效、安全地完成系统切换与部署,快速投入AI推理与边缘计算等应用开发。

weixin_29164185的博客 353

WebGL系列教程八(GLSL着色器基础语法)

通过前七讲,我们已经见过了WebGL中的部分基础语法,这一讲我们来完善一下WebGL中的语法。GLSL是的首字母缩写,表示的含义就是着色器语言。而我们在第一讲中就已经说过,WebGL中使用的是GLSL的ES版本,ES即,意为嵌入式系统。因为最初GLSL ES是给嵌入式设备准备的,轻量级的三维图形渲染语言。

AIGIS的博客 1627

3D iToF深度分辨率测量

本文展示了RGB-D传感器在三维测量中的高精度表现。标靶深度图显示其具备清晰、低噪、无干扰的特性,点云数据完整度高且轮廓分明。该技术已成功应用于物流(体积测量误差<1%)、工业(高反光部件装配检测)和农业(果蔬成熟度分级)等领域,验证了其硬件和算法的可靠性,能够满足不同场景下的三维测量需求。

dream it possible 246

【ArcGIS Pro微课1000例】0067:ArcGIS Pro3.4.2学习版下载及安装教程

【ArcGIS Pro微课1000例】0067:ArcGIS Pro3.4.2学习版网盘下载及安装教程

智慧空间实验室 2374

学习threejs,使用自定义GLSL 着色器,实现粒子特效

本文详细介绍如何基于threejs在三维场景中构建的动态 3D 粒子系统,使用 Tailwind CSS 设置样式,并通过自定义 GLSL 着色器进行增强。具有交互式图案过渡、摄像机控制和动画切换,可提供身临其境的视觉体验。亲测可用。希望能帮助到您。一起学习,加油!加油!

我哎GIS博客 1160

1 四种防反接电路——multisim仿真

摘要:防反接电路可防止电源反接损坏器件,主要有四种方案:1)二极管串联(低成本,适用小电流);2)整流桥(无极性输入,但效率低);3)保险丝+稳压管(低损耗但需更换);4)MOS管方案(大电流、高效率,主流选择)。选型需考虑电流、压降和成本,MOS管因其低导通电阻(毫欧级)成为大电流应用的首选。口诀:"小电流二极管,大电流用MOS"可快速指导设计。

XU157303764的博客 1548

OpenGL(三)着色器语言GLSL

GLSL是一种着色器语言,需要有对应的图形API环境配合,可以使用OpenGL,也可以使用OpenGL ES,也可以使用WebGL。三者的关系可以简单理解为ES为GL的精简版,WebGL是ES的二次包装。如果我们打算从一个着色器向另一个着色器发送数据,我们必须在发送方着色器中声明一个输出,在接收方着色器中声明一个类似的输入。像cuda一样GLSL有几个数据并在一起的数据向量类型,例如vec4,包含4个float数据的向量。GLSL中内置的数据类型还有矩阵mat,但是矩阵只有浮点型的,而且是列优先排序。

qq_45983373的博客 1451

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

webgl 着色器_如何在WebAssembly中使用WebGL着色器

webgl 着色器by Dan Ruta 通过Dan Ruta 在WebAssembly中使用WebGL着色器 (Using WebGL shaders in WebAssembly) WebAssembly is blazing fast for number crunching, game engines, and many other things, but nothing can qu...

cumi7754的博客 2408

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

学习threejs,使用自定义GLSL 着色器,实现抽象艺术特效

本文详细介绍如何基于threejs在三维场景中使用自定义GLSL 着色器,实现抽象艺术特效。亲测可用。希望能帮助到您。一起学习,加油!加油!

我哎GIS博客 1535

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

WebGL Shader着色器GLSL语言

WebGL Shader着色器GLSL语言

weixin_45086164的博客 1944

学习threejs,使用自定义GLSL 着色器,生成艺术作品

本文详细介绍如何基于threejs在三维场景中使用自定义GLSL 着色器,生成艺术作品,亲测可用。希望能帮助到您。一起学习,加油!加油!

我哎GIS博客 1740

WebGL着色器& GLSL入门

我们已经讨论了着色器和 GLSL,但还没有真正给它们任何具体细节。我想我希望通过示例可以清楚地说明这一点,但为了以防万一,让我们尝试使其更清楚。正如其工作原理中所述,WebGL 每次绘制内容时都需要 2 个着色器。顶点着色器和片段着色器。每个着色器都是一个函数。顶点着色器和片段着色器链接在一起形成着色器程序(或只是程序)。一个典型的 WebGL 应用程序会有很多着色器程序。推荐:用快速搭建3D场景。

新缸中之脑 984

[WebGL入门]八,着色器的说明和基础

顶点着色器和片段着色器,都可以通过GLSL来书写,基本上它们算是一个组合。着色器的内部,必须要定义一个main函数,在这个函数里面添加自己的处理。而且,要从WebGL一侧向着色器传递数据的时候,需要用到一些特殊的修饰符所定义的变量。 要向着色器传递各个顶点的不同的信息的时候,使用attribute修饰符声明变量,要向着色器传递对所有顶点来说都一样的信息的时候,使用uniform修饰符声明变量。 另外,从顶点着色器向片段着色器传递数据的时候,使用varying修饰符声明变量。 顶点着色器中内置的变量gl_Po

lufy小屋 1万+

WebGL着色器GLSL矩阵mat

WebGL着色器GLSL矩阵mat 本文是WebGL教程(电子书)的2.5节内容 着色器语言中通过关键字mat2、mat3、mat4分别声明一个2x2矩阵、3x3矩阵、4x4矩阵,通过内置函数mat2()、mat3()、mat4()分别创建一个2x2矩阵、3x3矩阵、4x4矩阵。 关键字 数据类型 mat2 2x2矩阵,4个元素 mat3 3x3矩阵,9个元素 mat4 4...

u014291990的博客 6897
上一篇: WebGL着色器声明一个常量const
下一篇: WebGL着色器向量/矢量
Threejs可视化
博客等级 码龄13年 2690粉丝 307原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Threejs可视化

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值