glsl着色器学习(九)屏幕像素空间和设置颜色

在上一篇文章中,使用的是裁剪空间进行绘制,这篇文章使用屏幕像素空间的坐标进行绘制。

上一篇的顶点着色器大概是这样子的

回归一下顶点着色的主要任务:

  •  通常情况下,顶点着色器会进行一系列的矩阵变换操作,将输入的顶点坐标从模型空间依次经过世界空间,视图空间,最终转换到裁剪空间。

将顶点着色器改成下面这样:

 <script id="vertex-shader-2d" type="x-shader/x-vertex">// 获取顶点attribute vec2 a_position;// 获取画布宽高uniform vec2 u_resolution;void main() {// 把像素坐标转换到0-1vec2 zeroToOne = a_position / u_resolution ;// 先转换成0-2 再减去1最终变成-1 - 1(裁剪空间)vec2 clipSpace = zeroToOne * 2.0 - 1.0;// 乘以vec2(1,-1)是将Y轴坐标交换gl_Position = vec4(clipSpace * vec2(1,-1),1.0,1.0);}</script>

 从着色器程序中获取u_resolution的位置

const resolutionUniformLocation = gl.getUniformLocation(program, 'u_resolution');

设置resolution值

gl.uniform2f(resolutionUniformLocation, gl.canvas.width, gl.canvas.height);

再改变一下postions三个顶点的值,因为绘制二维图形,所以只需要3组共6个顶点

  const positions = [200, 200, 250, 350, 350, 250];

运行Study.html。得到如图所示,如果改变颜色下面讲解

改变颜色:

改变颜色需要修改片元着色器

片段着色器主要作用:

  • 核心作用是为每个片元(预备像素)确定颜色。
<script id="fragment-shader-2d" type="x-shader/x-fragment">precision mediump float;// 定义一个统一变量的u_color,用来接收应用程序传递的四维向量颜色属性uniform vec4 u_color;void main() {gl_FragColor = u_color;}</script>

找到u_color在着色器程序中的位置

const colorUniformLocation = gl.getUniformLocation(program, 'u_color');

设置颜色值,这里才用随机值产生颜色R/G/B/A四个分量

gl.uniform4f(colorUniformLocation, Math.random(), Math.random(), Math.random(), Math.random());

运行Study.html,不出意外,每次刷新页面,都会出现不同的颜色。

撒花!!!

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

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

相关文章

【笔记-流程记录】从零开始做一个人形怪兽(建模阶段)

大型 1.第一步还是找素模&#xff0c;打开材质球&#xff0c;吸管点一下&#xff0c;就会出现素模的贴图&#xff0c;一共有四个 比如&#xff0c;点进去第一个&#xff0c;再点漫反射&#xff0c;再点psd就会得到相应的贴图 2.然后我们依然是面片然后插入参考图 如果透视窗口…

KEIL中编译51程序 算法计算异常的疑问

KEIL开发 51 单片机程序 算法处理过程中遇到的问题 ...... by 矜辰所致前言 因为产品的更新换代&#xff0c; 把所有温湿度传感器都换成 SHT40 &#xff0c;替换以前的 SHT21。在 STM32 系列产品上的替换都正常&#xff0c;但是在一块 51 内核的无线产品上面&#xff0c;数据…

高逼格、有难度、较前沿的商业计划书撰写策略

正在创业的老板们注意啦&#xff01;在实施创业计划之前&#xff0c;一定要先写一份商业计划书。它不仅是获得投资的关键&#xff0c;更是梳理创业思路、明确发展方向的重要工具。通过撰写商业计划书&#xff0c;你可以更清晰地了解市场需求、竞争状况、产品定位等关键信息&…

腾讯地图SDK Android版开发 10 InfoWindow

腾讯地图SDK Android版开发 10 InfoWindow 前言介绍默认风格自定义样式实现方式交互操作播放信息窗口的动画开启多窗口模式 相关类和接口默认样式MarkerOptions 类Marker 类TencentMap类TencentMap.OnInfoWindowClickListener 接口类 自定义样式TencentMap 类TencentMap.InfoWi…

SealSuite 一站式 IT 管理与办公安全解决方案,助力出海企业夯实数字化底座

数字化办公时代&#xff0c;企业升级 IT 基础设施&#xff0c;已不再是选择题&#xff0c;而是必答题。 数字化办公时代&#xff0c;企业为何要升级 IT 基础设施&#xff1f; 随着时代变化与科技进步&#xff0c;人们的工作方式也发生了巨大变化。如今&#xff0c;远程办公、全…

C#编程语言及.NET 平台快速入门指南

Office Word 不显示 Citavi 插件&#xff0c;如何修复&#xff1f;_citavi安装后word无加载项-CSDN博客 https://blog.csdn.net/Viviane_2022/article/details/128946061?spm1001.2100.3001.7377&utm_mediumdistribute.pc_feed_blog_category.none-task-blog-classify_ta…

重生奇迹MU老大哥剑士职业宝刀未老

重生奇迹MU中&#xff0c;老大哥剑士职业一直以来备受玩家们的喜爱。这个职业不仅拥有强大的攻击力、防御力和战斗技巧&#xff0c;而且还能够通过使用各种宝刀来增强自身的战斗能力。即便经过了多年的沉淀&#xff0c;老大哥剑士依然是一名宝刀未老的男人&#xff0c;仍然能够…

Java项目: 基于SpringBoot+mybatis+maven学科竞赛管理系统(含源码+数据库+毕业论文)

一、项目简介 本项目是一套基于SpringBootmybatismaven学科竞赛管理系统 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xff0c;eclipse或者idea 确保可以运行&#xff01; 该系统功能完善、界面美观、操作简…

性能测试经典案例解析——政务查询系统

各位好&#xff0c;我是 道普云 一站式云测试SaaS平台。一个在软件测试道路上不断折腾十余年的萌新。 欢迎关注我的主页 道普云 文章内容具有一定门槛&#xff0c;建议先赞再收藏慢慢学习&#xff0c;有不懂的问题欢迎私聊我。 希望这篇文章对想提高软件测试水平的你有所帮…

linux 安装sar工具,centos7-sar工具的安装过程及其简单应用(1)

10时02分44秒 bond0 0.00 0.00 0.00 0.00 0.00 0.00 0.00 10时02分44秒 vnet3 1.00 8.50 0.19 5.52 0.00 0.00 0.00 10时02分44秒 eth0 19.00 11.50 2.83 2.31 …

通俗易懂理解Hive四种排序

前言 Hive的四种排序包括Sort By、Order By、Distribute By和Cluster By。有关这四种排序的区别&#xff0c;在大数据面试中可能会经常被问到&#xff0c;在我们很多人的实际应用中可能最常用的就是全局排序order by&#xff0c;因此对于其他几个排序理解并不准确&#xff0c;…

vue3集成sql语句编辑器

使用的是codemirror 安装 pnpm add codemirror vue-codemirror --savepnpm add codemirror/lang-sqlpnpm add codemirror/theme-one-dark使用 <template><codemirror v-model"configSql" placeholder"Code goes here..." ref"codemirrorR…

适合程序员在周末阅读的历史书籍:理解人性和世界

一、《人类简史&#xff1a;从动物到上帝》 这本书提供了对人类历史和社会发展的深刻洞察&#xff0c;帮助读者理解人类过去、现在和可能的未来。 《人类简史&#xff1a;从动物到上帝》是以色列历史学家尤瓦尔赫拉利&#xff08;Yuval Noah Harari&#xff09;创作的一部极具影…

【物理密度计工作原理图】密度大小与密度计浸没深度关系图

密度大小与密度计浸没深度关系图 绘制图像的好处&#xff1a; 直观展示数据&#xff1a;图形可以直观地展示数据之间的关系&#xff0c;使得理解和分析数据变得更加容易。 便于比较&#xff1a;通过图形可以快速比较不同液体密度下密度计的浸没深度变化。 科学验证&#xff…

glsl着色器学习(六)

准备工作已经做完&#xff0c;下面开始渲染 gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);gl.clearColor(0.5, 0.7, 1.0, 1.0); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);gl.enable(gl.DEPTH_TEST); gl.enable(gl.CULL_FACE);设置视口 gl.viewport(0,…

StarRocks Lakehouse 快速入门——Apache Iceberg

导读&#xff1a; StarRocks Lakehouse 快速入门旨在帮助大家快速了解湖仓相关技术&#xff0c;内容涵盖关键特性介绍、独特的优势、使用场景和如何与 StarRocks 快速构建一套解决方案。最后大家也可以通过用户真实的使用场景来了解 StarRocks Lakehouse 的最佳实践&#xff01…

判断给定的一个不限长的数字串大小变化趋势、经典面试题:猴子排成圈踢出求最后剩下大王编号以及Debian服务器php中安装IMAP扩展各种报错解决过程

一、判断给定的一个不限长的数字串大小变化趋势 自制了一道面试题&#xff1a;给定一个不限长的数字字符串&#xff0c;判断每一位数字的大小变化趋势是否是^或v趋势&#xff0c;如果是就返回true&#xff0c;如果不是就返回false。比如121即属于^&#xff0c;322129即属于v。这…

SSM健身俱乐部网站—计算机毕业设计源码25623

摘 要 大数据时代下&#xff0c;数据呈爆炸式地增长。为了迎合信息化时代的潮流和信息化安全的要求&#xff0c;利用互联网服务于其他行业&#xff0c;促进生产&#xff0c;已经是成为一种势不可挡的趋势。在健身俱乐部的要求下&#xff0c;开发一款整体式结构的健身俱乐部网站…

多维时序 | Matlab基于SSA-SVR麻雀算法优化支持向量机的数据多变量时间序列预测

多维时序 | Matlab基于SSA-SVR麻雀算法优化支持向量机的数据多变量时间序列预测 目录 多维时序 | Matlab基于SSA-SVR麻雀算法优化支持向量机的数据多变量时间序列预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab基于SSA-SVR麻雀算法优化支持向量机的数据多变…