【WebGL】fbo双pass案例
双pass渲染案例（离线渲染一个三角面，然后渲染到一个占满屏幕的矩阵上）
离线渲染如何需要开启深度测试的话，需要额外操作，这里不展开
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>WebGL 2 Offline Rendering and Texture Display</title>
</head><body><canvas id="glCanvas" width="800" height="600"></canvas><script>// 将 WebGL 初始化和渲染逻辑封装到一个函数中function initWebGL() {// 获取 canvas 元素const canvas = document.getElementById('glCanvas');// 获取 WebGL 2 上下文const gl = canvas.getContext('webgl2');// 如果无法获取 WebGL 2 上下文，给出提示并结束函数if (!gl) {alert('无法初始化 WebGL 2，你的浏览器可能不支持。');return;}// 离线渲染的着色器代码const offlineVertexShaderSource = `#version 300 esin vec2 a_position;void main() {gl_Position = vec4(a_position, 0.0, 1.0);}`;const offlineFragmentShaderSource = `#version 300 esprecision mediump float;out vec4 fragColor;void main() {fragColor = vec4(1.0, 0.0, 0.0, 1.0);}`;// 最终渲染到屏幕的着色器代码const finalVertexShaderSource = `#version 300 esin vec2 a_position;in vec2 a_texCoord;out vec2 v_texCoord;void main() {gl_Position = vec4(a_position, 0.0, 1.0);v_texCoord = a_texCoord;}`;const finalFragmentShaderSource = `#version 300 esprecision mediump float;in vec2 v_texCoord;uniform sampler2D u_texture;out vec4 fragColor;void main() {fragColor = texture(u_texture, v_texCoord);}`;// 创建着色器函数function createShader(gl, type, source) {const shader = gl.createShader(type);gl.shaderSource(shader, source);gl.compileShader(shader);const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);if (success) {return shader;}console.log(gl.getShaderInfoLog(shader));gl.deleteShader(shader);}// 创建着色器程序函数function createProgram(gl, vertexShader, fragmentShader) {const program = gl.createProgram();gl.attachShader(program, vertexShader);gl.attachShader(program, fragmentShader);gl.linkProgram(program);const success = gl.getProgramParameter(program, gl.LINK_STATUS);if (success) {return program;}console.log(gl.getProgramInfoLog(program));gl.deleteProgram(program);}// 创建离线渲染的着色器程序const offlineVertexShader = createShader(gl, gl.VERTEX_SHADER, offlineVertexShaderSource);const offlineFragmentShader = createShader(gl, gl.FRAGMENT_SHADER, offlineFragmentShaderSource);const offlineProgram = createProgram(gl, offlineVertexShader, offlineFragmentShader);// 创建最终渲染的着色器程序const finalVertexShader = createShader(gl, gl.VERTEX_SHADER, finalVertexShaderSource);const finalFragmentShader = createShader(gl, gl.FRAGMENT_SHADER, finalFragmentShaderSource);const finalProgram = createProgram(gl, finalVertexShader, finalFragmentShader);// 离线渲染的顶点数据const offlinePositions = [-0.5, -0.5,0.5, -0.5,0.0, 0.5];// 创建离线渲染的顶点缓冲区const offlinePositionBuffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, offlinePositionBuffer);gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(offlinePositions), gl.STATIC_DRAW);// 获取离线渲染的顶点属性位置const offlinePositionAttributeLocation = gl.getAttribLocation(offlineProgram, 'a_position');gl.enableVertexAttribArray(offlinePositionAttributeLocation);gl.vertexAttribPointer(offlinePositionAttributeLocation, 2, gl.FLOAT, false, 0, 0);// 创建帧缓冲区对象（FBO）const framebuffer = gl.createFramebuffer();gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);// 创建纹理对象const texture = gl.createTexture();gl.bindTexture(gl.TEXTURE_2D, texture);gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, canvas.width, canvas.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_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.CLAMP_TO_EDGE);// 将纹理附加到帧缓冲区gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);// 检查帧缓冲区是否完整if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE) {console.error('帧缓冲区不完整');}// 离线渲染gl.useProgram(offlineProgram);gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);gl.viewport(0, 0, canvas.width, canvas.height);gl.clearColor(0.0, 0.0, 0.0, 1.0);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.TRIANGLES, 0, 3);// 最终渲染到屏幕的顶点数据和纹理坐标const finalPositions = [-1.0, -1.0,1.0, -1.0,-1.0, 1.0,-1.0, 1.0,1.0, -1.0,1.0, 1.0];const finalTexCoords = [0.0, 0.0,1.0, 0.0,0.0, 1.0,0.0, 1.0,1.0, 0.0,1.0, 1.0];// 创建最终渲染的顶点缓冲区和纹理坐标缓冲区const finalPositionBuffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, finalPositionBuffer);gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(finalPositions), gl.STATIC_DRAW);const finalTexCoordBuffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, finalTexCoordBuffer);gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(finalTexCoords), gl.STATIC_DRAW);// 获取最终渲染的顶点属性位置和纹理坐标属性位置const finalPositionAttributeLocation = gl.getAttribLocation(finalProgram, 'a_position');gl.enableVertexAttribArray(finalPositionAttributeLocation);gl.vertexAttribPointer(finalPositionAttributeLocation, 2, gl.FLOAT, false, 0, 0);const finalTexCoordAttributeLocation = gl.getAttribLocation(finalProgram, 'a_texCoord');gl.enableVertexAttribArray(finalTexCoordAttributeLocation);gl.vertexAttribPointer(finalTexCoordAttributeLocation, 2, gl.FLOAT, false, 0, 0);// 获取最终渲染的纹理采样器位置const textureUniformLocation = gl.getUniformLocation(finalProgram, 'u_texture');// 最终渲染到屏幕gl.useProgram(finalProgram);gl.bindFramebuffer(gl.FRAMEBUFFER, null);gl.viewport(0, 0, canvas.width, canvas.height);gl.clearColor(0.0, 0.0, 0.0, 1.0);gl.clear(gl.COLOR_BUFFER_BIT);gl.activeTexture(gl.TEXTURE0);gl.bindTexture(gl.TEXTURE_2D, texture);gl.uniform1i(textureUniformLocation, 0);gl.drawArrays(gl.TRIANGLES, 0, 6);}// 调用封装好的函数来初始化和渲染 WebGLinitWebGL();</script>
</body></html>
相关文章：
【WebGL】fbo双pass案例
双pass渲染案例（离线渲染一个三角面，然后渲染到一个占满屏幕的矩阵上） 离线渲染如何需要开启深度测试的话，需要额外操作，这里不展开 <!DOCTYPE html> <html lang"en"><head><meta ch…...
Unity面板介绍_层级面板（23.1.1）
一、Inspector(检视面板) 显示当前选定游戏对象附加的组件及其属性信息。为重要游戏物体选择图标 二、面板详情...
详解Nginx 配置
一、Nginx 介绍 Nginx 是一款轻量级的 Web 服务器 / 反向代理服务器及电子邮件（IMAP/POP3）代理服务器。它由俄罗斯的程序设计师 Igor Sysoev 所开发，自 2004 年发布以来，凭借其高性能、低内存消耗、高并发处理能力等特点…...
数据库系统概念
1. 绪论 数据库的基本概念: 数据(data): 数据库中存储的基本对象, 可以是文字, 声音, 图片, 视频等。 数据库(DB): 概括来说就是永久存储, 有组织, 可共享的大量数据的集合。 数据库管理系统(DBMS): 和操作系统一样是计算机基础软件, 主要有数据定义语言(DDL, 对数据对象的组…...
51单片机学习之旅——定时器
打开软件 1与其它等于其它，0与其它等于0 1或其它等于1，0或其它等于其它 TMODTMOD&0xF0;//0xF01111 0000进行与操作，高四位保持，低四位清零，高四位定时器1，低四位定时器0 TMODTMOD|0x01;//0x010000 0…...
一台服务器将docker image打包去另一天服务器安装这个镜像
一台服务器将docker image打到去另一天服务器安装这个镜像 1. 打包2.另一台服务器执行 1. 打包 docker save -o nebula-graph-studio.tar harbor1.vm.example.lan/dockerio/vesoft/nebula-graph-studioxxx.tar 是打包好的文件 后面的是 docker image 2.另一台服务器执行 docke…...
)
QT串口通信之二，实现单个温湿度传感器数据的采集(采用Qt-modbus实现)
接上 QT串口通信之一，实现单个温湿度传感器数据的采集 上述文章中用QSerialPort实现了温湿度传感器的采集，实际上比较麻烦的，因为需要自定义解析帧， 接下来，用Qt-modbus-封装度更高的协议，来实现温湿度的采集； #include "MainWindow.h" #include "ui_M…...
基于SpringBoot的校园消费点评管理系统
作者：计算机学姐 开发技术：SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等，“文末源码”。 专栏推荐：前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏：…...
【小沐学Java】VSCode搭建Java开发环境
文章目录 1、简介2、安装VSCode2.1 简介2.2 安装 3、安装Java SDK3.1 简介3.2 安装3.3 配置 4、安装插件Java Extension Pack4.1 简介4.2 安装4.3 配置 结语 1、简介 2、安装VSCode 2.1 简介 Visual Studio Code 是一个轻量级但功能强大的源代码编辑器，可在桌面上…...
《操作系统 - 清华大学》8 -4：进程管理：进程控制结构
深度剖析进程控制块：操作系统进程管理的核心关键 在操作系统的复杂体系中，进程控制块（PCB）是实现高效进程管理的关键所在。接下来，将从多个维度深入剖析进程控制块，帮助更好地理解其在操作系统中的重要作用…...
RPC 框架项目剖析
RPC 框架项目剖析 说明 本文用于梳理一个 rpc项目的实现细节，此项目基于cpp语言 大概三千行左右，用于学习目的。 项目链接：rpc项目 项目底层类 1.抽象消息类 描述： 各种消息的基类 属性： 消息id，消息类型…...
C++ Boost面试题大全及参考答案
目录 boost::thread_group 如何实现批量线程管理？ 解释 boost::asio 中 proactor 模式的设计原理 使用 boost::atomic 实现无锁环形缓冲区 boost::mutex 与 std::mutex 在异常安全上的差异 如何用 boost::condition_variable 实现生产者 - 消费者模型 当 boost::shared_p…...
关于Transparent native-to-ascii conversion
1、功能 自动转换ASCII编码，即在文件系统上，文件的编码格式为ascii编码，在编辑器（idea/pycharm）中，其展现结果为配置的编码格式，仅展现方便阅读 使用UTF-8并勾选自动转换ASCII编码结果&#x…...
js数据类型检测
JavaScript的数据类型检测 typeof操作符 适用场景 基本数据类型快速判断：适用于快速判断变量是否为number、string、boolean、undefined、function等基本数据类型。比如在函数参数检查中，若要求传入数字参数，可用typeof来初步判断。函数类型…...
go 模块管理
go version 查看版本 go version go1.21.12 windows/amd64 需要保证：go的版本升级为1.11以上，go mod依赖的最底版本 go env 查看go的环境变量 go env 开启go mod # 标识开启go的模块管理 set GO111MODULE=on GO111MODULE有三个值：off, on和auto（默认值）。 GO111M…...
记一次复杂分页查询的优化历程：从临时表到普通表的架构演进
1. 问题背景 在项目开发中，我们需要实现一个复杂的分页查询功能，涉及大量 IP 地址数据的处理和多表关联。在我接手这个项目的时候,代码是这样的 要知道代码里面的 ipsList 数据可能几万条甚至更多,这样拼接的sql,必然是要内存溢出的,一味地扩大jvm参数不…...
基于 Python 的项目管理系统开发
基于 Python 的项目管理系统开发 一、引言 在当今快节奏的工作环境中，有效的项目管理对于项目的成功至关重要。借助信息技术手段开发项目管理系统，能够显著提升项目管理的效率和质量。Python 作为一种功能强大、易于学习且具有丰富库支持的编程语言&…...
java面试场景问题
还在补充，这几天工作忙，闲了会把答案附上去，也欢迎各位大佬评论区讨论 1.不用分布式锁如何防重复提交 方法 1：基于唯一请求 ID（幂等 Token） 思路：前端生成 一个唯一的 requestId（…...
JS宏实例：数据透视工具的制作（四）
上一节中，我们完成了核心的计算代码部分，本节中将完善事件代码 一、创建所有需求的事件函数 1、窗体初始化 // 窗体初始化 function pivotForm_Initialize(){} function typeSet_Initialize(){} function valueSet_Initialize(){} function allCol…...
)
5. Go 方法(结构体的方法成员)
Go语言没有传统的 class ，为了让函数和结构体能够关联，Go引入了“方法”的概念。 当普通函数添加了接收者（receiver）后，就变成了方法。 一、函数和方法示例 // 普通函数 func Check(s string) string {return s }//…...
linux之kylin系统nginx的安装
一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源（HTML/CSS/图片等），响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址，提高安全性 3.负载均衡服务器 支持多种策略分发流量…...
centos 7 部署awstats 网站访问检测
一、基础环境准备（两种安装方式都要做） bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats࿰…...
理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端
🌟 什么是 MCP？ 模型控制协议 (MCP) 是一种创新的协议，旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议，它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序
一、开发环境准备 工具安装： 下载安装DevEco Studio 4.0（支持HarmonyOS 5）配置HarmonyOS SDK 5.0确保Node.js版本≥14 项目初始化： ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...
项目部署到Linux上时遇到的错误（Redis，MySQL，无法正确连接，地址占用问题）
Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败，具体原因是客户端发送了密码认证请求，但Redis服务器未设置密码 1.为Redis设置密码（匹配客户端配置） 步骤： 1）.修…...
LeetCode - 199. 二叉树的右视图
题目 199. 二叉树的右视图 - 力扣（LeetCode） 思路 右视图是指从树的右侧看，对于每一层，只能看到该层最右边的节点。实现思路是： 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...
08. C#入门系列【类的基本概念】：开启编程世界的奇妙冒险
C#入门系列【类的基本概念】：开启编程世界的奇妙冒险 嘿，各位编程小白探险家！欢迎来到 C# 的奇幻大陆！今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类！别害怕，跟着我，保准让你轻松搞…...
作为测试我们应该关注redis哪些方面
1、功能测试 数据结构操作：验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化：测试aof和aof持久化机制，确保数据在开启后正确恢复。 事务：检查事务的原子性和回滚机制。 发布订阅：确保消息正确传递。 2、性…...
Spring AI Chat Memory 实战指南：Local 与 JDBC 存储集成
一个面向 Java 开发者的 Sring-Ai 示例工程项目，该项目是一个 Spring AI 快速入门的样例工程项目，旨在通过一些小的案例展示 Spring AI 框架的核心功能和使用方法。 项目采用模块化设计，每个模块都专注于特定的功能领域，便于学习和…...
Spring Security 认证流程——补充
一、认证流程概述 Spring Security 的认证流程基于 过滤器链（Filter Chain），核心组件包括 UsernamePasswordAuthenticationFilter、AuthenticationManager、UserDetailsService 等。整个流程可分为以下步骤： 用户提交登录请求拦…...