webGL进阶（一）多重纹理效果

效果：

代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绘制多重纹理（漂浮的云）</title><script src="glMatrix-0.9.6.min.js"></script><script>let vertexstring = `attribute vec4 a_position;uniform   mat4    proj;attribute vec2 outUV;varying vec2 inUV;void main(void){gl_Position =  a_position;inUV = outUV;}`;let fragmentstring = `precision mediump float;uniform sampler2D texture;uniform sampler2D texture1;uniform float anim;varying vec2 inUV;void main(void){vec4 color1 =texture2D(texture,inUV);vec4 color2 =texture2D(texture1, vec2(inUV.x + anim, inUV.y));gl_FragColor = color1;}`;var projMat4 = mat4.create();var webgl;var uniformTexture = 0;var uniformTexture1 = 0;var uniformAnim = 0;var count = 0;var texture0;var texture1;function webglStart() {init();tick();}function tick() {requestAnimFrame(tick)draw();};function init() {initWebgl();initShader();initBuffer();}function initWebgl() {let webglDiv = document.getElementById('myCanvas');webgl = webglDiv.getContext("webgl");webgl.viewport(0, 0, webglDiv.clientWidth, webglDiv.clientHeight);mat4.ortho(0, webglDiv.clientWidth, webglDiv.clientHeight, 0, -1.0, 1.0, projMat4)}function initShader() {let vsshader = webgl.createShader(webgl.VERTEX_SHADER);let fsshader = webgl.createShader(webgl.FRAGMENT_SHADER);webgl.shaderSource(vsshader, vertexstring);webgl.shaderSource(fsshader, fragmentstring);webgl.compileShader(vsshader);webgl.compileShader(fsshader);if (!webgl.getShaderParameter(vsshader, webgl.COMPILE_STATUS)) {var err = webgl.getShaderInfoLog(vsshader);alert(err);return;}if (!webgl.getShaderParameter(fsshader, webgl.COMPILE_STATUS)) {var err = webgl.getShaderInfoLog(fsshader);alert(err);return;}let program = webgl.createProgram();webgl.attachShader(program, vsshader);webgl.attachShader(program, fsshader)webgl.linkProgram(program);webgl.useProgram(program);webgl.program = program}function initBuffer() {let arr = [-0.5, -0.5, 0, 1,      0, 0,-0.5, 0.5, 0, 1,       0, 1,0.5, 0.5, 0, 1,         1, 1,0.5, -0.5, 0, 1,        1, 0,]let index = [0, 1, 2,2, 0, 3];let pointPosition = new Float32Array(arr);let aPsotion = webgl.getAttribLocation(webgl.program, "a_position");let triangleBuffer = webgl.createBuffer();webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);webgl.bufferData(webgl.ARRAY_BUFFER, pointPosition, webgl.STATIC_DRAW);webgl.enableVertexAttribArray(aPsotion);webgl.vertexAttribPointer(aPsotion, 4, webgl.FLOAT, false, 6 * 4, 0);let uniformProj = webgl.getUniformLocation(webgl.program, "proj");webgl.uniformMatrix4fv(uniformProj, false, projMat4);attribOutUV = webgl.getAttribLocation(webgl.program, "outUV");webgl.enableVertexAttribArray(attribOutUV);webgl.vertexAttribPointer(attribOutUV, 2, webgl.FLOAT, false, 6 * 4, 4 * 4);let indexarr = new Uint8Array(index)let indexBuffer = webgl.createBuffer();webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER, indexBuffer);webgl.bufferData(webgl.ELEMENT_ARRAY_BUFFER, indexarr, webgl.STATIC_DRAW);uniformTexture = webgl.getUniformLocation(webgl.program, "texture");uniformTexture1 = webgl.getUniformLocation(webgl.program, "texture1");texture1 = initTexture("fog.png");texture0 = initTexture("山水图像纹理映射.png");}function handleLoadedTexture(texture) {webgl.bindTexture(webgl.TEXTURE_2D, texture);webgl.pixelStorei(webgl.UNPACK_FLIP_Y_WEBGL,666);webgl.texImage2D(webgl.TEXTURE_2D, 0, webgl.RGBA, webgl.RGBA, webgl.UNSIGNED_BYTE, texture.image);webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_MAG_FILTER, webgl.LINEAR);webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_MIN_FILTER, webgl.LINEAR);webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_WRAP_S, webgl.CLAMP_TO_EDGE);webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_WRAP_T, webgl.CLAMP_TO_EDGE);}function initTexture(imageFile, num) {let textureHandle = webgl.createTexture();textureHandle.image = new Image();textureHandle.image.src = imageFile;textureHandle.image.onload = function () {handleLoadedTexture(textureHandle, num)}return textureHandle;}function draw() {webgl.clearColor(0.0, 1.0, 0.0, 1.0);webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT);webgl.enable(webgl.DEPTH_TEST);//纹理变动uniformAnim = webgl.getUniformLocation(webgl.program, "anim");count = count + 0.01;webgl.uniform1f(uniformAnim, count);webgl.activeTexture(webgl.TEXTURE0);webgl.bindTexture(webgl.TEXTURE_2D, texture0);webgl.uniform1i(uniformTexture, 0);webgl.activeTexture(webgl.TEXTURE1);webgl.bindTexture(webgl.TEXTURE_2D, texture1);webgl.uniform1i(uniformTexture1, 1);webgl.drawElements(webgl.TRIANGLES, 6, webgl.UNSIGNED_BYTE, 0);}window.requestAnimFrame = (function () {return window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.oRequestAnimationFrame ||window.msRequestAnimationFrame ||function (callback, element) {window.setTimeout(callback, 1000 / 60);};})();</script>
</head><body onload="webglStart()"><canvas id='myCanvas' width="1024" height='1000'></canvas>
</body></html>

复盘：

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

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

相关文章

Matter蓝牙解析

Matter蓝牙解析

解析 Matter 蓝牙广播 定义需要解析的字段。 #import <Foundation/Foundation.h>NS_ASSUME_NONNULL_BEGIN/// 蓝牙广播服务 ID extern NSString * const MatterBLEAdvServiceID;@interface MatterBLEAdv : NSObject @property (nonatomic, assign) NSInteger opCode; @…
阅读更多...
【Unity踩坑】Unity导出的UWP项目编译失败

【Unity踩坑】Unity导出的UWP项目编译失败

在Unity中导出了UWP平台的项目后&#xff08;Xaml或D3D&#xff09;&#xff0c;使用Visual Studio编译时发生错误&#xff1a; Error: Unity.IL2CPP.Building.BuilderFailedException: Lump_libil2cpp_vm.cpp 查找后发现是Visual Studio 与Unity兼容的问题 原贴&#xff1a;…
阅读更多...
黑神话：仙童，数据库自动反射魔法棒

黑神话：仙童，数据库自动反射魔法棒

黑神话&#xff1a;仙童&#xff0c;数据库自动反射魔法棒 Golang 通用代码生成器仙童发布了最新版本电音仙女尝鲜版十一及其介绍视频&#xff0c;视频请见&#xff1a;https://www.bilibili.com/video/BV1ET4wecEBk/ 此视频介绍了使用最新版的仙童代码生成器&#xff0c;将 …
阅读更多...
使用YOLOv11进行视频目标检测

使用YOLOv11进行视频目标检测

使用YOLOv11进行视频目标检测 完整代码 import cv2 from ultralytics import YOLOdef predict(chosen_model, img, classes[], conf0.5):if classes:results chosen_model.predict(img, classesclasses, confconf)else:results chosen_model.predict(img, confconf)return r…
阅读更多...
view deign 和 vue2 合并单元格的方法

view deign 和 vue2 合并单元格的方法

1.vue版本和view design 版本 {"vue": "^2.6.11","view-design": "^4.7.0", }2.Data中定义数据 spanArr: [], // 某一列下需要合并的行数 pos: 0// 索引// 注意点&#xff1a; 在获取列表前&#xff0c;需要重置 this.spanArr [] 注…
阅读更多...
C++-容器适配器- stack、queue、priority_queue和仿函数

C++-容器适配器- stack、queue、priority_queue和仿函数

目录 1.什么是适配器 2.deque 1.简单了解结构 2.deque的缺陷 3.为什么选择deque作为stack和queue的底层默认容器 3.stack&#xff08;栈&#xff09; 4.queue&#xff08;队列&#xff09; 5.仿函数 6.priority_queue&#xff08;优先级队列&#xff09;&#xff08;堆…
阅读更多...
切片辅助超推理-sahi库-get_sliced_prediction源码简析

切片辅助超推理-sahi库-get_sliced_prediction源码简析

代码地址&#xff1a;https://github.com/obss/sahi get_sliced_prediction源码中重要是理解nms或nmm。nms经常遇到不说。 其中nmm即Non-Max Merging算法是最重要部分&#xff0c;它其实和nms比较类似。其具体原理我看到了一片博客&#xff0c;感觉讲的很好&#xff0c;如下&a…
阅读更多...
Linux C接口编程入门之文件I/O

Linux C接口编程入门之文件I/O

一切皆文件 "Linux一切皆文件"是Linux操作系统中的一个重要理念和设计原则。在Linux系统中&#xff0c;几乎所有的设备、资源都以文件的形式进行访问和操作。简化了操作系统的设计和管理&#xff0c;提供了一种统一的抽象模型&#xff0c;使得应用程序可以使用相同的…
阅读更多...
docker简述

docker简述

1.安装dockers&#xff0c;配置docker软件仓库 安装&#xff0c;可能需要开代理&#xff0c;这里我提前使用了下好的包安装 启动docker systemctl enable --now docker查看是否安装成功 2.简单命令 拉取镜像&#xff0c;也可以提前下载使用以下命令上传 docker load -i imag…
阅读更多...
【gRPC】1—gRPC是什么

【gRPC】1—gRPC是什么

gRPC是什么 ⭐⭐⭐⭐⭐⭐ Github主页&#x1f449;https://github.com/A-BigTree 笔记链接&#x1f449;https://github.com/A-BigTree/Code_Learning ⭐⭐⭐⭐⭐⭐ 如果可以&#xff0c;麻烦各位看官顺手点个star~&#x1f60a; &#x1f4d6;RPC专栏&#xff1a;https://b…
阅读更多...
数据工程师岗位常见面试问题-3（附回答）

数据工程师岗位常见面试问题-3（附回答）

数据工程师已成为科技行业最重要的角色之一&#xff0c;是组织构建数据基础设施的骨干。随着企业越来越依赖数据驱动的决策&#xff0c;对成熟数据工程师的需求会不断上升。如果您正在准备数据工程师面试&#xff0c;那么应该掌握常见的数据工程师面试问题&#xff1a;包括工作…
阅读更多...
脉冲下跳沿提取电路

脉冲下跳沿提取电路

本例中的电路可将负脉冲转换为正脉冲。尽管这个任务看似简单&#xff0c;但负脉冲的幅度为-5V~-2V。按照不同应用要求&#xff0c;正脉冲也需要不同的脉冲宽度&#xff0c;而负脉冲是梯形的。脉冲必须先经过一个长距离的传输线才能到达某个控制设备。有多个电路可以解决这一问题…
阅读更多...
jQuery——解决快速点击翻页的bug

jQuery——解决快速点击翻页的bug

本文分享到此结束&#xff0c;欢迎大家评论区相互讨论学习&#xff0c;下一篇继续分享jQuery中内置动画的学习。
阅读更多...
谷歌AI大模型Gemini API快速入门及LangChain调用视频教程

谷歌AI大模型Gemini API快速入门及LangChain调用视频教程

1. 谷歌Gemini API KEY获取及AI Studio使用 要使用谷歌Gemini API&#xff0c;首先需要获取API密钥。以下是获取API密钥的步骤&#xff1a; 访问Google AI Studio&#xff1a; 打开浏览器&#xff0c;访问Google AI Studio。使用Google账号登录&#xff0c;若没有账号&#xf…
阅读更多...
大数据ETL数据提取转换和加载处理

大数据ETL数据提取转换和加载处理

什么是 ETL&#xff1f; 提取转换加载&#xff08;英语&#xff1a;Extract, transform, load&#xff0c;简称ETL&#xff09;&#xff0c;用来描述将资料从来源端经过抽取、转置、加载至目的端的过程。ETL一词较常用在数据仓库&#xff0c;但其对象并不限于数据仓库。 ETL&…
阅读更多...
C++竞赛初阶—— 石头剪子布

C++竞赛初阶—— 石头剪子布

题目内容 石头剪子布&#xff0c;是一种猜拳游戏。起源于中国&#xff0c;然后传到日本、朝鲜等地&#xff0c;随着亚欧贸易的不断发展它传到了欧洲&#xff0c;到了近现代逐渐风靡世界。简单明了的规则&#xff0c;使得石头剪子布没有任何规则漏洞可钻&#xff0c;单次玩法比…
阅读更多...
Spring Cloud Netflix Zuul 网关详解及案例示范

Spring Cloud Netflix Zuul 网关详解及案例示范

1. 引言 在微服务架构中&#xff0c;API 网关作为服务间通信的入口&#xff0c;扮演着重要的角色。Netflix Zuul 是一个提供动态路由、监控、安全等功能的 API 网关服务器&#xff0c;它可以为微服务系统提供统一的入口&#xff0c;简化服务间的交互。在业务系统中&#xff0c…
阅读更多...
【计网】【计网】从零开始学习http协议 ---理解http重定向和请求方法

【计网】【计网】从零开始学习http协议 ---理解http重定向和请求方法

去光荣地受伤&#xff0c; 去勇敢地痊愈自己。 --- 简嫃 《水问》--- 从零开始学习http协议 1 知识回顾2 认识网络重定向3 http请求方法3.1 http常见请求方法3.2 postman工具进行请求3.3 处理GET和POST参数 1 知识回顾 前面两篇文章中我们学习并实现了http协议下的请求与应…
阅读更多...
Linux 命令 netstat 的 10 个基本用法

Linux 命令 netstat 的 10 个基本用法

Netstat 简介 Netstat 是一款命令行工具&#xff0c;可用于列出系统上所有的网络套接字连接情况&#xff0c;包括 tcp, udp 以及 unix 套接字&#xff0c;另外它还能列出处于监听状态&#xff08;即等待接入请求&#xff09;的套接字。如果你想确认系统上的 Web 服务有没有起来…
阅读更多...
行为设计模式 -观察者模式- JAVA

行为设计模式 -观察者模式- JAVA

观察者模式 一.简介二. 案例2.1 抽象主题&#xff08;Subject&#xff09;2.2 具体主题&#xff08;Concrete Subject&#xff09;2.3 抽象观察者&#xff08;Observer&#xff09;2.4 具体观察者&#xff08;Concrete Observer&#xff09;2.5 测试 三. 结论3.1 优缺点3.2 使用…
阅读更多...
最新文章

Copyright @ 2022~2023