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

着色器的认识

news 2026/3/26 21:10:01

知识了解：

着色器：

        顶点着色器: 用来描述顶点的特性,如位置、颜色等，其中，顶点：是指二维或三维空间中的一个点比如交点或者端点。

        片元着色器：用来进行逐片元处理操作，比如光照、颜色叠加等，其中，片元：可以理解为像素，逐片元处理就是逐个对像素进行处理。

初始化着色器：

        initShaders (gl, vshader, fshader)：在WebGL系统内部建立和初始化着色器。

                gl:指定渲染上下文

                vshader:指定顶点着色器程序代码(字符串)

                fshader:指定片元着色器程序代码(字符串)

html页面和JavaScript脚本：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试</title><script src="./lib/webgl-utils.js"></script><script src="./lib/webgl-debug.js"></script><script src="./lib/cuon-utils.js"></script><script src="./js/helloPoint.js"></script>
</head><body onload="main()"><canvas id="canvas" width="400" height="400"></canvas>
</body></html>

// helloPoint.js
// 6-13行是是顶点着色器程序（GLS ES语言）：作为字符串被存储在变量vshader_source中。其中顶点着色器程序本身从main()开始运行，和c语言程序一样。
// （逐点操作)顶点着色器: 用来描述顶点的特性,如位置、颜色等
// 顶点：是指二维或三维空间中的一个点比如交点或者端点
/*** GLSE中的数据类型* @type float:表示浮点数* @type vec4:表示由四个浮点数组成的矢量。矢量可译为向量，是既有大小又有方向的量* 齐次坐标使用如下的符号描述:(x,y,z,w)。齐次坐标(x,y,z,w)等价于三维坐标(x/w,y/w,z/w)。所以如果齐次坐标的第4个分量是1,你就可以将它当做三维坐标来使用。w的值必须是大于等于0的。如果w趋近于0,那么它所表示的点将趋近无穷远,所以在齐次坐标系中可以有无穷的概念。齐次坐标的存在,使得用矩阵乘法来描述顶点变换成为可能,三维图形系统在计算过程中,通常使用齐次坐标来表示顶点的三维坐标。* @type vec3:表示由三个浮点数组成的矢量* 注意,如果向某类型的变量赋一个不同类型的值,就会出错。*/
var vshader_source = `
void main(){// 设置点的位置,必需赋值,否则无法正常工作gl_Position = vec4(0.0,0.0,0.0,1.0);// 设置点的大小尺寸,这个是可选的,默认是1.0gl_PointSize = 10.0;
}
`
// 17-22行是是片元着色器程序（GLS ES语言）：作为字符串被存储在变量fshader_source中
// （逐片元操作)片元着色器：用来进行逐片元处理操作，比如光照、颜色叠加等
// 片元：可以理解为像素，逐片元处理就是逐个对像素进行处理
var fshader_source = `
void main(){//设置点颜色gl_FragColor = vec4(1.0,0.0,0.0,1.0);
}
`
//以上着色器：以JavaScript字符串形式编写的着色器语言程序
// 以下是主程序（JavaScript语言）
function main () {// 获取canvas元素var canvas = document.getElementById('canvas')// 获取webGl绘图上下文var gl = getWebGLContext(canvas)if (!gl) {console.log('获取webGl绘图上下文失败')return}// 初始化着色器/*** initShaders (gl, vshader, fshader)* 在WebGL系统内部建立和初始化着色器。* 参数*  @param gl:指定渲染上下文*  @param vshader:指定顶点着色器程序代码(字符串)*  @param fshader:指定片元着色器程序代码(字符串)* 返回值* @return true:初始化着色器成功* @return false:初始化着色器失败*/// 可以简单理解gl_Position和gl_PointSize两个全局变量从顶点着色器传递到片元着色器if (!initShaders(gl, vshader_source, fshader_source)) {console.log('初始化着色器失败')return}// 设置<canvas>背景色gl.clearColor(0.0, 0.0, 0.0, 1.0)// 清空<canvas>gl.clear(gl.COLOR_BUFFER_BIT)// 绘制一个点// gl.drawArrays (mode, first, count)/*** gl.drawArrays (mode, first, count)* 执行顶点着色器,按照mode参数指定的方式绘制图形。* 参数* mode 指定绘制的方式,可接收以下常量符号:gl.POINTS,  gl.LINES, gl.LINE STRIP, gl.LINE LOOP, gl.TRIANGLES, gl.TRIANGLE STRIP, gl.TRIANGLE FAN * first 指定从哪个顶点开始绘制(整型数)* count 指定绘制需要用到多少个顶点(整型数)* 返回值 无 * 错误 * INVALID ENUM 传入的mode参数不是前述参数之一* INVALID VALUE  参数first或count是负数*/gl.drawArrays(gl.POINTS, 0, 1)
}

效果：

相关文章：

着色器的认识

知识了解&#xff1a; 着色器&#xff1a; 顶点着色器: 用来描述顶点的特性,如位置、颜色等&#xff0c;其中&#xff0c;顶点&#xff1a;是指二维或三维空间中的一个点比如交点或者端点。 片元着色器&#xff1a;用来进行逐片元处理操作&#xff0c;比如光照、颜色叠加等&…...

编程日记 2024/10/30 7:24:28

科技的成就（六十四）

591、《传奇》开始公开测试 "2001 年 9 月&#xff0c;《传奇》开始公开测试。《传奇》&#xff08;全称《热血传奇》&#xff09;是由韩国 WeMade 娱乐开发制作的大型多人在线角色扮演游戏&#xff0c;由 Delphi 编写。盛大网络于2001 年获得该游戏在中国的代理权。《传奇…...

编程日记 2024/10/30 7:23:27

银行信贷风控专题：Python、R 语言机器学习数据挖掘应用实例合集：xgboost、决策树、随机森林、贝叶斯等...

全文链接&#xff1a;https://tecdat.cn/?p38026 分析师&#xff1a;Fanghui Shao 在当今金融领域&#xff0c;风险管控至关重要。无论是汽车贷款违约预测、银行挖掘潜在贷款客户&#xff0c;还是信贷风控模型的构建&#xff0c;以及基于决策树的银行信贷风险预警&#xff0c;…...

编程日记 2024/10/30 7:22:25

〈壮志凌云：独行侠〉中的超高音速战机

电影《壮志凌云&#xff1a;独行侠》中使用的黑星&#xff08;Darkstar&#xff09;高超音速概念战机模型&#xff0c;虽然看起来像是科幻电影里的产物&#xff0c;但这架飞机实际上是由洛克希德马丁公司的臭鼬工厂&#xff08;Skunk Works&#xff09;设计&#xff0c;这是一家…...

编程日记 2024/10/30 7:21:23

k8s集群 ceph rbd 存储动态扩容

k8s 集群 rbd 扩容有两种方法&#xff0c;如下所示 通过StorageClass自动扩容 # kubectl get sc csi-rbd-sc -oyaml|grep allowVolumeExpansion allowVolumeExpansion: true如果搜索有如上字段&#xff0c;说明是可以自动扩容的&#xff0c;修改对应要扩容的 PVC容量&#xf…...

编程日记 2024/10/30 7:20:21

C语言笔记（指针题目）例题+图解

本文分为两部分 &#xff0c;第一部分为数组、字符串、字符指针在sizeof和strlen中的辨析&#xff0c;第二部分是一些笔试题目。若有错误&#xff0c;请批评指正。 目录 1.第一部分 1.1.数组名的使用 1.1.1一维整型数组在sizeof中的使用 1.1.2一维字符数组在sizeof中的使用…...

编程日记 2024/10/30 7:19:20

从零开始的 vue项目部署到服务器详细步骤（vue项目build打包+nginx部署+配置ssl证书）

从零开始的 vue项目部署到服务器详细步骤&#xff08;vue项目build打包nginx部署配置ssl证书&#xff09; 文章目录 从零开始的 vue项目部署到服务器详细步骤&#xff08;vue项目build打包nginx部署配置ssl证书&#xff09;一、前言二、vue项目部署前配置1、vite.config.js 增加…...

编程日记 2024/10/30 7:12:14

[OceanBase-不止于记录]：揭秘双引擎战略，共探AI时代数据架构未来

前言 又到了一年一度大家最爱的探会文章&#xff0c;非常荣幸收到OceanBase官方的邀请参加2024 OceanBase 年度发布会&#xff0c;作为一个经常参加线下探会的博主&#xff0c;每一次体验都有所不同&#xff0c;每一次新技术的突破都让人感到无比兴奋。同时&#xff0c;作为数…...

编程日记 2024/10/30 7:11:13

项目：抽奖系统

文章目录 1. 项目&#xff1a;抽奖系统 1. 项目&#xff1a;抽奖系统 from faker import Fakerfk Faker(localezh_CN)name_list [] for i in range(100):name_list.append(fk.name()) print(name_list)import randomclass MyFrame(wx.Frame):def __init__(self):wx.Frame.__…...

编程日记 2024/10/30 7:10:12

synchronized进阶原理

synchronized进阶原理 1.轻量级锁 轻量级锁的使用场景:如果一个对象虽然有多个线程访问,但多线程访问的时间是错开的(也就是没有竞争),那么可以使用轻量级锁来优化(如果出现竞争,操作系统会将轻量级锁升级为重量级锁)。轻量级锁对使用者是透明的(由操作系统控制),即语法仍是s…...

编程日记 2024/10/30 7:09:11

C++，STL 052（24.10.29）

内容 1.对map容器的大小进行操作。 2.map容器的交换操作。 运行代码 #include <iostream> #include <map>using namespace std;void printMap(map<int, int> &m) {for (map<int, int>::iterator it m.begin(); it ! m.end(); it){cout <<…...

编程日记 2024/10/30 7:06:09

git下载和配置

git是什么&#xff1f; Git是一种分布式版本控制系统&#xff0c;用于跟踪文件的变化&#xff0c;尤其是源代码。它允许多个开发者在同一项目上进行协作&#xff0c;同时保持代码的历史记录。Git的主要特点包括&#xff1a; 分布式&#xff1a;每个开发者都有项目的完整副本&a…...

编程日记 2024/10/30 7:04:07

Linux基础—基础命令及相关知识5(ubuntu网络配置)

网络的配置方法 centos网络配置 centos的网卡位置 /etc/sysconfig/network-scripts/ifcfg-ens33(centos网卡文件) bootproto表示获得IP地址的方式是静态的还是动态 onboot表示启动系统时是否激活该网络接口 设置IP地址&#xff0c;子网掩码&#xff0c;网关&#xff0c;dns…...

编程日记 2024/10/30 7:03:05

使用 firewall-cmd 管理 Linux 防火墙

firewalld-cmd命令翻译<一> Linux 系统中&#xff0c;firewalld 是一个流行的动态防火墙管理工具&#xff0c; firewall-cmd 是它的命令行接口。通过 firewall-cmd&#xff0c;可以轻松地管理防火墙规则、配置区域&#xff08;zones&#xff09;、处理端口等。 这篇文章…...

编程日记 2024/10/30 7:02:01

鸿蒙OS试题

哪些是持续部署最佳实践? A. 灰度发布:先在小部分用户或区域进行部署&#xff0c;观察没问题后再全面推广 B.手工部署:持续部署可以采用手工部署的方式发布软件: 1、有一份非常详尽的文档&#xff0c;该文档描述了执行步骤及每个步骤中易出错的地方; 2、以手工测试来确认该…...

编程日记 2024/10/30 7:01:00

Flutter InkWell组件去掉灰色遮罩

当InkerWell组件内部获取到焦点时&#xff0c;会展示一层灰色遮罩 将focusColor属性设置为透明即可 Flutter InkWell焦点效果源码分析 问题描述 当 InkWell 组件获得焦点时&#xff0c;会显示一层灰色遮罩效果。需要找出这个效果是由哪些组件控制的&#xff0c;以及具体的…...

编程日记 2024/10/30 6:57:56

Android——metaData

获取元数据信息的步骤&#xff1a; 调用 getPackageManager 方法获得当前应用的包管理器调用包管理器的 getActivityInfo 方法获得当前活动的信息对象活动信息对象的 metaData 是 Bundle 包裹类型&#xff0c;调用包裹对象的 getString 即可获得指定名称的参数值 配置 metaDa…...

编程日记 2024/10/30 6:53:52

SLAM｜1. 相机投影及相机畸变

一个能思考的人&#xff0c;才真是一个力量无边的人。——巴尔扎克 本章主要内容&#xff1a; 1.针孔相机模型 2.相机成像的几个坐标系图像 3.畸变及相机标定 本节主要介绍在照相机拍摄过程中&#xff0c;现实物体如何跟照片上的像素关联起来&#xff0c;具体涉及相机成像的物…...

编程日记 2024/10/30 6:50:49

nginx配置及虚拟主机

nginx配置及虚拟主机 一、http协议介绍1、网站类型2、涉及的软件3、http协议介绍 二、nginx安装、启动1、nginx介绍2、nginx安装3、nginx启动管理 三、nginx配置文件1、配置文件语法结构2、全局配置3、事件驱动模型的配置4、http的配置 四、虚拟主机配置1、类型2、基于名称的虚…...

编程日记 2024/10/30 6:48:43

ElasticSearch - Bucket Script 使用指南

文章目录 官方文档Bucket Script 官文1. 什么是 ElasticSearch 中的 Bucket Script&#xff1f;2. 适用场景3. Bucket Script 的基本结构4. 关键参数详解5. 示例官方示例&#xff1a;计算每月 T 恤销售额占总销售额的比率百分比示例计算&#xff1a;点击率 (CTR) 6. 注意事项与…...

编程日记 2024/10/30 6:47:42

3步彻底解决Umi-OCR Rapid版本HTTP服务无响应问题：参数配置完全指南

3步彻底解决Umi-OCR Rapid版本HTTP服务无响应问题&#xff1a;参数配置完全指南 【免费下载链接】Umi-OCR Umi-OCR: 这是一个免费、开源、可批量处理的离线OCR软件&#xff0c;适用于Windows系统&#xff0c;支持截图OCR、批量OCR、二维码识别等功能。 项目地址: https://git…...

编程新知 2026/3/26 20:37:47

ReplaceItems.jsx：Adobe Illustrator批量对象替换的终极解决方案

ReplaceItems.jsx&#xff1a;Adobe Illustrator批量对象替换的终极解决方案 【免费下载链接】illustrator-scripts Adobe Illustrator scripts 项目地址: https://gitcode.com/gh_mirrors/il/illustrator-scripts 还在为Illustrator中重复的替换操作而烦恼吗&#xff1…...

编程新知 2026/3/26 20:21:44

新手零基础入门：借助快马AI生成你的第一个班级宠物园网页应用

作为一个刚接触编程的新手&#xff0c;想要快速上手开发一个班级宠物园网页应用&#xff0c;确实会遇到不少挑战。不过现在有了InsCode(快马)平台这样的工具&#xff0c;整个过程变得简单多了。下面我就分享一下自己从零开始构建这个项目的经验&#xff0c;希望能帮助到同样想入…...

编程新知 2026/3/26 20:19:43

AI原生应用：解决幻觉难题的有效途径

AI原生应用：解决幻觉难题的有效途径 关键词：AI原生应用、大模型幻觉、检索增强生成（RAG）、验证模块、智能系统架构 摘要：大语言模型（LLM）的“幻觉”（Hallucination）问题——生成与事实不符的内容，正成为AI应用落地的最大障碍。本文将从“AI原生应用”的视角出发，用通…...

编程新知 2026/3/26 19:12:50

告别用人“开盲盒”｜江湖背调定义全生命周期风控范式

企业用人别踩坑&#xff01;传统单次背调只有入口安检&#xff0c;无法应对员工在职动态风险&#xff0c;漏洞百出江湖背调以“雇前可信、在职可控”&#xff0c;正式定义全生命周期用工风控范式&#xff0c;筑牢从招聘到离职全链路安全屏障&#xff01;传统背调vs全生命周期风…...

编程新知 2026/3/26 18:36:37

《Cancer Discov》(IF: 33.3)｜新型空间蛋白组和空间转录组整合流程解析肿瘤免疫微环境

空间转录组学和空间蛋白组学能分别在原位解析基因表达和蛋白功能状态。然而&#xff0c;它们各有自己独特的应用场景&#xff0c;例如空间转录组覆盖广但预测功能不直接&#xff0c;而空间蛋白组功能信号直接&#xff0c;靶向性高&#xff0c;能提供更多的有效生物学信息。如果…...

编程新知 2026/3/26 17:59:55

PROFINET通信避坑指南：PN/PN耦合器在S7系列PLC中的3种典型应用场景解析

PROFINET通信避坑指南&#xff1a;PN/PN耦合器在S7系列PLC中的3种典型应用场景解析 在工业自动化领域&#xff0c;PROFINET通信的稳定性和可靠性直接关系到生产线的运行效率。PN/PN耦合器作为跨子网通信的关键设备&#xff0c;其配置方式的选择往往让工程师陷入纠结。本文将深入…...

编程新知 2026/3/26 16:57:19

SakuraLLM：二次元翻译的终极解决方案，完全离线的日中翻译大模型

SakuraLLM&#xff1a;二次元翻译的终极解决方案&#xff0c;完全离线的日中翻译大模型 【免费下载链接】Sakura-13B-Galgame 适配轻小说/Galgame的日中翻译大模型 项目地址: https://gitcode.com/gh_mirrors/sa/Sakura-13B-Galgame 如果你热爱日本轻小说、Galgame等二次…...

编程新知 2026/3/26 16:06:53

Element React：革新性UI组件库助力React开发者高效构建企业级应用界面

Element React&#xff1a;革新性UI组件库助力React开发者高效构建企业级应用界面 【免费下载链接】element-react Element UI 项目地址: https://gitcode.com/gh_mirrors/el/element-react 在现代Web应用开发中&#xff0c;界面构建往往占据了开发者大量时间与精力。El…...

编程新知 2026/3/26 15:24:00

从零推导贝尔曼方程：强化学习中的价值函数与策略优化

1. 强化学习中的价值函数基础 想象你正在玩一个迷宫游戏&#xff0c;每走一步都会消耗体力&#xff0c;找到出口能获得大奖。这时候你会想&#xff1a;**"从当前位置出发&#xff0c;最终能获得多少奖励&#xff1f;"这个问题的答案就是价值函数&#xff08;Value Fu…...

编程新知 2026/3/26 14:27:33