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）ÿ…...
谷歌浏览器插件
项目中有时候会用到插件 sync-cookie-extension1.0.0：开发环境同步测试 cookie 至 localhost，便于本地请求服务携带 cookie 参考地址：https://juejin.cn/post/7139354571712757767 里面有源码下载下来，加在到扩展即可使用FeHelp…...
idea大量爆红问题解决
问题描述 在学习和工作中，idea是程序员不可缺少的一个工具，但是突然在有些时候就会出现大量爆红的问题，发现无法跳转，无论是关机重启或者是替换root都无法解决 就是如上所展示的问题，但是程序依然可以启动。 问题解决…...
uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖
在前面的练习中，每个页面需要使用ref，onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入，需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...
（二）TensorRT-LLM | 模型导出（v0.20.0rc3）
0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述，后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作，其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...
ElasticSearch搜索引擎之倒排索引及其底层算法
文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...
在WSL2的Ubuntu镜像中安装Docker
Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包： for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...
如何理解 IP 数据报中的 TTL？
目录 前言理解 前言 面试灵魂一问：说说对 IP 数据报中 TTL 的理解？我们都知道，IP 数据报由首部和数据两部分组成，首部又分为两部分：固定部分和可变部分，共占 20 字节，而即将讨论的 TTL 就位于首…...
)
Typeerror: cannot read properties of undefined (reading ‘XXX‘)
最近需要在离线机器上运行软件，所以得把软件用docker打包起来，大部分功能都没问题，出了一个奇怪的事情。同样的代码，在本机上用vscode可以运行起来，但是打包之后在docker里出现了问题。使用的是dialog组件，…...
用机器学习破解新能源领域的“弃风”难题
音乐发烧友深有体会，玩音乐的本质就是玩电网。火电声音偏暖，水电偏冷，风电偏空旷。至于太阳能发的电，则略显朦胧和单薄。 不知你是否有感觉，近两年家里的音响声音越来越冷，听起来越来越单薄？ —…...
智能AI电话机器人系统的识别能力现状与发展水平
一、引言 随着人工智能技术的飞速发展，AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术，在客户服务、营销推广、信息查询等领域发挥着越来越重要…...