当前位置： 首页 > news >正文

【WebGL】fbo双pass案例

news 2026/2/9 7:56:29
双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渲染案例&#xff08;离线渲染一个三角面&#xff0c;然后渲染到一个占满屏幕的矩阵上&#xff09; 离线渲染如何需要开启深度测试的话&#xff0c;需要额外操作&#xff0c;这里不展开 <!DOCTYPE html> <html lang"en"><head><meta ch…...

编程日记 2025/2/25 4:01:22

Unity面板介绍_层级面板（23.1.1）

一、Inspector(检视面板) 显示当前选定游戏对象附加的组件及其属性信息。为重要游戏物体选择图标 二、面板详情...

编程日记 2025/2/25 3:59:12

详解Nginx 配置

一、Nginx 介绍 Nginx 是一款轻量级的 Web 服务器 / 反向代理服务器及电子邮件&#xff08;IMAP/POP3&#xff09;代理服务器。它由俄罗斯的程序设计师 Igor Sysoev 所开发&#xff0c;自 2004 年发布以来&#xff0c;凭借其高性能、低内存消耗、高并发处理能力等特点&#xf…...

编程日记 2025/2/25 3:57:07

数据库系统概念

1. 绪论 数据库的基本概念: 数据(data): 数据库中存储的基本对象, 可以是文字, 声音, 图片, 视频等。 数据库(DB): 概括来说就是永久存储, 有组织, 可共享的大量数据的集合。 数据库管理系统(DBMS): 和操作系统一样是计算机基础软件, 主要有数据定义语言(DDL, 对数据对象的组…...

编程日记 2025/2/25 3:56:05

51单片机学习之旅——定时器

打开软件 1与其它等于其它&#xff0c;0与其它等于0 1或其它等于1&#xff0c;0或其它等于其它 TMODTMOD&0xF0;//0xF01111 0000进行与操作&#xff0c;高四位保持&#xff0c;低四位清零&#xff0c;高四位定时器1&#xff0c;低四位定时器0 TMODTMOD|0x01;//0x010000 0…...

编程日记 2025/2/25 3:54:02

一台服务器将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…...

编程日记 2025/2/25 3:53:01

QT串口通信之二，实现单个温湿度传感器数据的采集(采用Qt-modbus实现)

接上 QT串口通信之一，实现单个温湿度传感器数据的采集 上述文章中用QSerialPort实现了温湿度传感器的采集，实际上比较麻烦的，因为需要自定义解析帧， 接下来，用Qt-modbus-封装度更高的协议，来实现温湿度的采集； #include "MainWindow.h" #include "ui_M…...

编程日记 2025/2/25 3:49:58

基于SpringBoot的校园消费点评管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…...

编程日记 2025/2/25 3:47:56

【小沐学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 是一个轻量级但功能强大的源代码编辑器&#xff0c;可在桌面上…...

编程日记 2025/2/25 3:43:51

《操作系统 - 清华大学》8 -4：进程管理：进程控制结构

深度剖析进程控制块&#xff1a;操作系统进程管理的核心关键 在操作系统的复杂体系中&#xff0c;进程控制块&#xff08;PCB&#xff09;是实现高效进程管理的关键所在。接下来&#xff0c;将从多个维度深入剖析进程控制块&#xff0c;帮助更好地理解其在操作系统中的重要作用…...

编程日记 2025/2/25 3:33:38

RPC 框架项目剖析

RPC 框架项目剖析 说明 本文用于梳理一个 rpc项目的实现细节&#xff0c;此项目基于cpp语言 大概三千行左右&#xff0c;用于学习目的。 项目链接&#xff1a;rpc项目 项目底层类 1.抽象消息类 描述&#xff1a; 各种消息的基类 属性&#xff1a; 消息id&#xff0c;消息类型…...

编程日记 2025/2/25 3:25:24

C++ Boost面试题大全及参考答案

目录 boost::thread_group 如何实现批量线程管理？ 解释 boost::asio 中 proactor 模式的设计原理 使用 boost::atomic 实现无锁环形缓冲区 boost::mutex 与 std::mutex 在异常安全上的差异 如何用 boost::condition_variable 实现生产者 - 消费者模型 当 boost::shared_p…...

编程日记 2025/2/25 3:24:20

关于Transparent native-to-ascii conversion

1、功能 自动转换ASCII编码&#xff0c;即在文件系统上&#xff0c;文件的编码格式为ascii编码&#xff0c;在编辑器&#xff08;idea/pycharm&#xff09;中&#xff0c;其展现结果为配置的编码格式&#xff0c;仅展现方便阅读 使用UTF-8并勾选自动转换ASCII编码结果&#x…...

编程日记 2025/2/25 3:22:15

js数据类型检测

JavaScript的数据类型检测 typeof操作符 适用场景 基本数据类型快速判断&#xff1a;适用于快速判断变量是否为number、string、boolean、undefined、function等基本数据类型。比如在函数参数检查中&#xff0c;若要求传入数字参数&#xff0c;可用typeof来初步判断。函数类型…...

编程日记 2025/2/25 3:19:07

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…...

编程日记 2025/2/25 3:16:02

记一次复杂分页查询的优化历程：从临时表到普通表的架构演进

1. 问题背景 在项目开发中&#xff0c;我们需要实现一个复杂的分页查询功能&#xff0c;涉及大量 IP 地址数据的处理和多表关联。在我接手这个项目的时候,代码是这样的 要知道代码里面的 ipsList 数据可能几万条甚至更多,这样拼接的sql,必然是要内存溢出的,一味地扩大jvm参数不…...

编程日记 2025/2/25 3:12:54

基于 Python 的项目管理系统开发

基于 Python 的项目管理系统开发 一、引言 在当今快节奏的工作环境中&#xff0c;有效的项目管理对于项目的成功至关重要。借助信息技术手段开发项目管理系统&#xff0c;能够显著提升项目管理的效率和质量。Python 作为一种功能强大、易于学习且具有丰富库支持的编程语言&…...

编程日记 2025/2/25 3:11:51

java面试场景问题

还在补充&#xff0c;这几天工作忙&#xff0c;闲了会把答案附上去&#xff0c;也欢迎各位大佬评论区讨论 1.不用分布式锁如何防重复提交 方法 1&#xff1a;基于唯一请求 ID&#xff08;幂等 Token&#xff09; 思路&#xff1a;前端生成 一个唯一的 requestId&#xff08;…...

编程日记 2025/2/25 3:09:41

JS宏实例：数据透视工具的制作（四）

上一节中&#xff0c;我们完成了核心的计算代码部分&#xff0c;本节中将完善事件代码 一、创建所有需求的事件函数 1、窗体初始化 // 窗体初始化 function pivotForm_Initialize(){} function typeSet_Initialize(){} function valueSet_Initialize(){} function allCol…...

编程日记 2025/2/25 3:05:33

5. Go 方法(结构体的方法成员)

Go语言没有传统的 class &#xff0c;为了让函数和结构体能够关联&#xff0c;Go引入了“方法”的概念。 当普通函数添加了接收者&#xff08;receiver&#xff09;后&#xff0c;就变成了方法。 一、函数和方法示例 // 普通函数 func Check(s string) string {return s }//…...

编程日记 2025/2/25 3:04:31

多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

编程新知 2026/2/8 16:53:48

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

编程新知 2026/1/2 4:05:05

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

编程新知 2026/1/27 7:46:36

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

编程新知 2026/2/5 20:33:43

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/12/31 6:28:08

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2026/1/31 23:44:39

mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

编程新知 2026/2/4 16:17:25

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的？

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

编程新知 2025/8/6 2:19:46

Go 语言并发编程基础：无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

编程新知 2026/1/29 3:25:02

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

编程新知 2026/1/25 14:31:47