webGL编程指南 第五章 TexturedQuad_Clamp_Mirror
我会持续更新关于wegl的编程指南中的代码。
当前的代码不会使用书中的缩写，每一步都是会展开写。希望能给后来学习的一些帮助
git代码地址 ：空
上一章节中我们学习了如何使用varyting变量绘制图片，本章节，我们学习texParameteri的使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport"><title>Document</title><style>#canvas {width: 100vw;height: 100vw;border: 1px solid greenyellow;}</style>
</head><body>!!!!!需要指出的是要选择当前文件夹下的sky.jpg!!!!!!<!-- <input type="file" accept="image/*" onchange="loadFile(event)"> --><input type="file" onchange="loadFile(event)"><canvas id="canvas"></canvas><script>// let imgSrc = 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3740843900,2506868884&fm=15&gp=0.jpg.'let vexterSource = `precision mediump float;attribute vec4 a_Position;attribute vec2 a_TexCoord;varying vec2 v_TexCoord;void main(){gl_Position = a_Position;//顶点坐标v_TexCoord = a_TexCoord;//纹理坐标系下的坐标}`let fragmentSource = `precision mediump float;uniform sampler2D u_Sampler;//纹理varying vec2 v_TexCoord;//纹理坐标系下的坐标void main(){gl_FragColor = texture2D(u_Sampler,v_TexCoord);}`let canvas = document.getElementById('canvas');let gl = canvas.getContext('webgl');//创建顶点着色器let vertextShader = gl.createShader(gl.VERTEX_SHADER);//给顶点着色器赋值gl.shaderSource(vertextShader, vexterSource);//编译顶点着色器gl.compileShader(vertextShader);//创建片元着色器let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);//给片元着色器赋值gl.shaderSource(fragmentShader, fragmentSource)//编译片元着色器gl.compileShader(fragmentShader)//检测着色器创建是否正确if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {alert(gl.getShaderInfoLog(fragmentShader));}//创建程序let program = gl.createProgram();//给程序赋值gl.attachShader(program, vertextShader); gl.attachShader(program, fragmentShader);//连接程序gl.linkProgram(program);//使用此着色器gl.useProgram(program);//变量的处理//获取顶点着色器中的变量a_Positionlet a_Position = gl.getAttribLocation(program, 'a_Position');//获取顶点着色器中的变量a_TexCoordlet a_TexCoord = gl.getAttribLocation(program, 'a_TexCoord');//获取片元着色器中的变量u_Samplerlet u_Sampler = gl.getUniformLocation(program, 'u_Sampler');//顶点坐标与纹理坐标let vertexTexCoords = new Float32Array([ -0.5,0.5,-0.3,1.7,-0.5,-0.5,-0.3,-0.2,0.5,0.5,1.7,1.7,0.5,-0.5,1.7,-0.2])let f32Seize = vertexTexCoords.BYTES_PER_ELEMENT;//给定点设置坐标 几何图形与纹理的坐标let vertexBuffer = gl.createBuffer();//绑定buffergl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);//绑定数据gl.bufferData(gl.ARRAY_BUFFER, vertexTexCoords, gl.STATIC_DRAW);//给a_Position赋值gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, f32Seize * 4, 0);//使用此变量gl.enableVertexAttribArray(a_Position);//纹理坐标let texCoordBuffer = gl.createBuffer();//绑定buffergl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);//绑定数据gl.bufferData(gl.ARRAY_BUFFER, vertexTexCoords, gl.STATIC_DRAW);//给a_TexCoord赋值gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false, f32Seize * 4, f32Seize * 2);//使用此变量gl.enableVertexAttribArray(a_TexCoord);gl.clearColor(0, 0, 0, 1.0);//获取图片的素材 const loadFile = (event) => {var file = event.target.files[0];var reader = new FileReader();reader.onload = function (event) {// 文件里的文本会在这里被打印出来 let img = new Image();img.src = event.target.result;img.onload = () => {let texture = gl.createTexture(); showImage(texture,img)}};reader.readAsDataURL(file);};function showImage(texture, img) { document.body.appendChild(img)gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);//开始0号纹理通道gl.activeTexture(gl.TEXTURE0);//想目标绑定纹理对象gl.bindTexture(gl.TEXTURE_2D, texture);//配置纹理的参数gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT);//设置着色器参数gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, img);//设置纹理数据gl.uniform1i(u_Sampler, 0) gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)}</script>
</body></html>相关文章：
webGL编程指南 第五章 TexturedQuad_Clamp_Mirror
我会持续更新关于wegl的编程指南中的代码。 当前的代码不会使用书中的缩写，每一步都是会展开写。希望能给后来学习的一些帮助 git代码地址 ：空 上一章节中我们学习了如何使用varyting变量绘制图片，本章节，我们学习texParameter…...
【Azure】存储服务：Azure 的存储账户
文章目录 一、前提知识（建议了解）二、介绍 Azure 存储帐户三、使用 Microsoft Azure 门户创建存储帐户 一、前提知识（建议了解） 在每一个云厂商中，都有自身的云存储，也有根据不同功能进行区分的不同类型的…...
高等数学啃书汇总重难点（十一）曲线积分与曲面积分
依旧是公式极其复杂恶心的一章，建议是：掌握两种线面积分的计算套路即可，和第8章一样属于同济版教材中最不重要的章节，不会对底层理解做过多考察~ 1.弧长曲线积分的几何意义 2.弧长曲线积分的定义和性质 3.弧长曲线积分的计算方式 …...
【算法专题】双指针—盛最多水的容器
一、题目解析 分析这个题目不难得出一个容积公式 二、算法原理 解法一：暴力枚举（超时） 套用上述的容积公式，使用两个for循环来枚举出所有可能的情况，再挑出最大值即可，但是这种写法会超时，导致…...
java入门，程序=数据结构+算法
一、前言 在学习java的时候，我印象最深的一句话是：程序数据结构算法，对于写java程序来说，这就是java的入门。 二、java基本数据结构与算法 1、数据类型 java中的数据类型8种基本数据类型： 整型 byte 、short 、int…...
9.MySQL索引的操作
个人主页：Lei宝啊 愿所有美好如期而遇 目录 索引操作 查询索引 创建主键索引 唯一索引的创建 普通索引的创建 全文索引的创建 删除索引 索引创建原则 索引操作 查询索引 第一种方法： show keys from 表名\G 我们了解其中几个就好。 第二种方法…...
大型加油站3d全景虚拟现实展示平台实现全方位立体呈现
近年来，随着国民经济的快速发展，交通基础设施的不断改善，机动车保有量的持续飙升，以至于加油站的建设数量和密度也在不断扩张。加油站作为人流量大且常见的城市场景，对加油站进行安全防范措施具有非常重要的安全意义。…...
Reading：Deep dive into the OnPush change detection strategy in Angular
原文连接：IndepthApp 今天深入阅读并总结Angualr中onPush更新策略。 1. 两种策略 & whats Lview？ Angular 实现了两种策略来控制各个组件级别的更改检测行为。这些策略定义为Default和OnPush： 被定义为枚举： export enum…...
野火霸天虎 STM32F407 学习笔记_1 stm32介绍；调试方法介绍
STM32入门——基于野火 F407 霸天虎课程学习 前言 博主开始探索嵌入式以来，其实很早就开始玩 stm32 了。但是学了一段时间之后总是感觉还是很没有头绪，不知道在学什么。前前后后分别尝试了江协科技、正点原子、野火霸天虎三次 stm32 的课程学习。江协科…...
@reduxjs/toolkit配置react-redux解决createStore或将在未来被淘汰警告
通常 我们用redux都需要通过 createStore 但目前 你去用它 基本都会被划线 甚至有点厉害的的编辑器 他会直接告诉你这个东西基本快被弃用了 这个应该大家都知道 最好不要用已经被明确未来或弃用的语法 因为一旦弃用这个系统就需要维护 而且说 一般会被淘汰的语法 本身也就是有…...
致敬1024天前的自己
今早打开手机就收到了来自CSDN的消息，哦，距离我发表第一篇技术博客已经过去1024个日夜了。 我第一次发技术博客是我大二做完我第一个网站时写的。因为网站需要上线服务器，涉及到不少linux相关的知识，我在自学的过程中走了不少弯路…...
〖Python网络爬虫实战㊱〗- JavaScript 网站加密和混淆
订阅：新手可以订阅我的其他专栏。免费阶段订阅量1000+python项目实战 Python编程基础教程系列（零基础小白搬砖逆袭) 说明：本专栏持续更新中，订阅本专栏前必读关于专栏〖Python网络爬虫实战〗转为付费专栏的订阅说明作者：爱吃饼干的小白鼠。Python领域优质创作者，2022年度…...
基于单片机设计的电子柜锁
一、前言 随着现代社会的不断发展，电子柜锁的应用越来越广泛。传统的机械柜锁存在一些不便之处，例如钥匙容易丢失、密码容易泄露等问题。设计一款基于单片机的电子柜锁系统成为了一个有趣而有意义的项目。 该电子柜锁系统通过电磁锁作为柜锁的开关&…...
Windows安装tensorflow-gpu=1.14.0CUDA=10.0cuDNN=7.4 （多版本CUDA共存）
文章目录 0. 前置说明1. 查看版本对应关系2. 安装 cuda3. 安装 cudnn4. 添加环境变量5. 安装 tensorflow 0. 前置说明 本机（Windows 11）已安装CUDA 11.7 使用命令查看显卡驱动： nvidia-smi这里显示的CUDA Version: 11.7说明支持安装11.7版本…...
CodeWhisperer 初体验
文章作者：1颗 orange 最近用了一个叫 CodeWhisperer 的插件，这个软件对于来说开发人员，插件有好多实用的功能，编码更高效，代码质量也提升了很多。 CodeWhisperer 简介 CodeWhisperer 是亚⻢逊出品的一款基于机器学习…...
HNU-算法设计与分析-讨论课1
第一次小班讨论 （以组为单位，每组一题，每组人人参与、合理分工，ppt中标记分工，尽量都有代码演示） 1.算法分析题 2-10、2-15(要求：有ppt（可代码演示）) 2.算法实现题 2-4、…...
java连接zookeeper
API ZooKeeper官方提供了Java API，可以通过Java代码来连接zookeeper服务进行操作。可以连接、创建节点、获取节点数据、监听节点变化等操作，具体有以下几个重要的类： ZooKeeper：ZooKeeper类是Java API的核心类，用于与…...
2023-11-01 node.js-electron-环境配置-记录
摘要: 2023-11-01 node.js-electron-环境配置-记录 相关文档: Node.js Build cross-platform desktop apps with JavaScript, HTML, and CSS | Electron node.js的国内源 - Python技术站 node.js 下载地址: https://nodejs.org/dist/v20.9.0/ 说明: 最好使用最新版本当前我使…...
使用 ElementUI 组件构建 Window 桌面应用探索与实践（WinForm）
零、实现原理与应用案例设计 1、原理 基础实例 Demo 可以参照以下这篇博文， 基于.Net CEF 实现 Vue 等前端技术栈构建 Windows 窗体应用-CSDN博客文章浏览阅读291次。基于 .Net CEF 库，能够使用 Vue 等前端技术栈构建 Windows 窗体应用https://blog.c…...
使用C++构建安全队列
1 背景 STL的容器不是线程安全的，我们经常会有需求要求数据结构线程安全，比如写生产者消费者模型的时候，就要求队列线程安全。利用std::queue和C线程标准库的一些组件（mutex，condition_variable）ÿ…...
别再乱装驱动了！Win10/Win11频繁蓝屏DPC_WATCHDOG_VIOLATION，用WinDBG揪出真凶（保姆级排查流程）
彻底解决Win10/Win11蓝屏噩梦：DPC_WATCHDOG_VIOLATION实战排查指南每次看到那个蓝色屏幕突然出现，心跳都会漏掉一拍——特别是当重要文件还没来得及保存的时候。DPC_WATCHDOG_VIOLATION（错误代码133）堪称Windows系统最令人头疼的蓝…...
别只当文本框用！解锁Unity InputField的5个隐藏技巧与常见坑点
别只当文本框用！解锁Unity InputField的5个隐藏技巧与常见坑点在Unity开发中，InputField组件看似简单，却是用户交互的核心枢纽。很多开发者仅仅把它当作一个基础输入框使用，却不知道其中隐藏着诸多能显著提升用户体验的实用技巧。…...
FModel深度指南：UE5.3+ Pak解包与Nanite资源导出实战
1. 这不是“下载器”，而是一把解构现代游戏资产的手术刀很多人第一次听说FModel，是在某个游戏论坛里看到一句轻描淡写的“用FModel扒资源”。于是下载、双击、拖进exe——结果卡在“Loading Pak Files”十分钟不动，或者导出一堆黑屏贴图、错位…...
函数指针调用的两种语法及其在嵌入式C中的应用
1. 函数指针调用：两种语法背后的故事在嵌入式C开发中，函数指针是实现回调机制、插件架构和动态行为的关键技术。最近有工程师发现，通过函数指针调用函数时存在两种看似不同的语法形式：(*ptr)(); // 传统间接调用语法 ptr(); …...
Python基础篇：闭包、装饰器wrapper
一、闭包 元组字典解包 def func(*args, **kwargs):print(type(args)) # <class tuple>print...
CSS伪类详解：从基础到高级应用
CSS伪类详解：从基础到高级应用 一、什么是CSS伪类 CSS伪类是一种选择器，用于选择处于特定状态的元素。它们以冒号 : 开头，可以为元素的不同状态设置不同的样式。伪类的强大之处在于它们能够根据用户交互、文档结构或元素状态来动态改变样式&a…...
机器学习驱动热光伏电池设计：从材料筛选到器件优化
1. 项目概述：当机器学习遇见热光伏电池设计在能源技术领域，热光伏（TPV）技术一直是一个充满魅力但又颇具挑战的方向。简单来说，它就像一个“热能收割机”，能将高温热源（比如工业废热、聚光太阳能…...
Props技术：基于隐私保护预言机的机器学习安全数据管道
1. Props技术：为机器学习解锁深网数据的安全钥匙如果你正在为机器学习项目寻找高质量的训练数据而发愁，或者为如何在应用中安全地处理用户敏感信息而头疼，那么你很可能已经触及了当前AI发展的一个核心痛点：数据瓶颈与信任危机。表…...
【Gemini生命周期价值深度解码】：20年AI架构师亲授5大阶段ROI测算模型与避坑指南
更多请点击： https://intelliparadigm.com 第一章：Gemini生命周期价值分析 Gemini 模型的生命周期价值（LTV）不仅体现在其推理性能与多模态能力上，更贯穿于从模型部署、持续微调、监控反馈到迭代升级的完整闭环。相较于…...
为什么92%的团队部署DeepSeek失败？火山引擎vLLM+Triton加速方案（2024最新生产级验证）
更多请点击： https://codechina.net 第一章：为什么92%的团队部署DeepSeek失败？火山引擎vLLMTriton加速方案（2024最新生产级验证） 92%的团队在部署DeepSeek-R1或DeepSeek-V2时遭遇推理延迟超标、OOM崩溃、吞吐骤降等问…...