位置: 编程技术 - 正文

WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)(webgl fbo)

编辑:rootadmin

推荐整理分享WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)(webgl fbo),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:webgl使用,webgl fbo,webgl fbo,webgl fbo,webgl viewport,webgl debug,webgl debug,webgl 示例,内容如对您有帮助,希望把文章链接给更多的朋友!

本文实例讲述了WebGL利用FBO完成立方体贴图效果的方法。分享给大家供大家参考,具体如下:

这篇主要记录WebGL的一些基本要点,顺便也学习下如何使用FBO与环境贴图。先看下效果图(需要支持WebGL,Chrome,火狐,IE)。

主要实现过程如下,先用FBO输出当前环境在立方体纹理中,再画出当前立方体,最后画球,并且把FBO关联的纹理贴在这个球面上。

开始WebGL时,最好有些OpenGL基础,在前面讲Obj完善与MD2时,大家可能已经发现了,因为着色器的添加使用,原来一些Opengl大部分API已经没有使用。WebGL就和这差不多,大部分功能是着色器完成主要功能,记录下主要过程,大家可以比较下前面的,看看是不是很像,为了熟悉WebGL基本功能,本文没有利用比较完善的框架,只是用到一个帮助计算矩阵的框架(gl-matrix.js).

和使用OpenGL一样,我们要初始化使用环境,提取一些全局使用量。相关代码如下:

初始化:

在这里,我们初始化在网页中WebGL的上下方环境,并给出一系列初始化过程。下面先给出房间,也就是其中立方体的相关代码。

立方体:

上面的代码主要分为初始化立方体的着色器对象,初始化相关缓存,然后绘制立方体,可以说在Opengl中,如果用着色器来画,过程也是差不多的,在Opengl里,已经没有固定管线的一些功能如InterleavedArrays来指定是顶点还是法线或是纹理了,统一用vertexAttribPointer来传递应用程序与着色器之间的数据。在前面 MD2桢动画实现里面后面的参数传递改进版也有相关应用。

相应着立方体着色器主要代码如下:

立方体着色器实现:

着色器中,已经没有ftransform()功能可供调用,要自己传递如模型,视图,透视矩阵,在这里,模型是以原点为中心来绘画,意思模型视图矩阵也就是视图矩阵,所以屏幕位置的计算只需要视图和透视矩阵。在片断着色器中,x,y是从顶点着色器中的纹理坐标传递过来,相应过程6.*8.0,相当于8个度,用于控制立方体上的方块显示,而tex2是着色器中的顶点映射[0,1]的值,分别给立方体的六面分别设置不同的意思,然后用二个矢量的乘积来混合这二种颜色显示,gl_FragColor = vec4(tex2,1.0) * vec4(sign(cos(x)+cos(y)))。

WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)(webgl fbo)

在显示球体之前,应该先生成当前环境的立方体绘图,在这里使用FBO,先生成桢缓存和立方体绘理,并关联,然后以原点为中心,分别向上下左右前右绘图,然后利用桢缓冲分别输出到立方体上的六个面,主要代码如下:

FBO与立方体纹理:

在上面不知是gl-matrix提供的矩阵算法有问题,还是本来应该这样,在上下面的时候生成的纹理图不对,需要偏转摄像机的向上矢量。因为这是摄像机位置与目标的生成的Z轴和设定的UP轴平行了,这样导致不能正确计算X轴,然后对应的UP轴也计算不出来,相应视图矩阵出现错误。

最后是球体的绘画,代码主要和立方体的差不多,注意球体的顶点算法。

球体:

可以看到,也是和立方体一样的三步,初始化着色器,初始化顶点与法线,绘画。下面给出着色器代码:

球体着色器:

和前面立方体有点不同的是,球体有自己的模型矩阵,这也是一般正常的用法,然后传递眼睛对应球体顶点矢量与法线传递在片断着色器中,在片断着色器中,就有用到前面所生成的立方体纹理,我们根据眼睛经过顶点通过对应法向量反射到立体体纹理上的点来获取当前球体所对应的环境颜色,在这里,我们可以直接调用textureCube来完成上面所说的过程,不需要我们手动来计算。

其中GetShader函数的使用,参照了 这里的讲解。

可以说,上面主要的绘制函数已经完成,但是我们这个是能动的,所以需要模拟如客户端环境每隔多久绘制一次,主要代码如下:

动画:

在上面,每隔毫秒调用一次Update与Draw函数,其中Update用于更新眼睛与球体位置,Draw绘画。

完整实例代码点击此处本站下载。

更多关于JS特效相关内容感兴趣的读者可查看本站专题:《jQuery动画与特效用法总结》及《jQuery常见经典特效汇总》

希望本文所述对大家JavaScript程序设计有所帮助。

JS正则表达式比较常见用法 废话不多说,直接步入正轨了,想要了解js正则表达式用法的相关知识,通过本教程学习吧。定义和使用varpatt1=newRegExp("hello");varpatt2=/world/;test方法test()

一篇文章掌握RequireJS常用知识 本文采取循序渐进的方式,从理论到实践,从RequireJS官方API文档中,总结出在使用RequireJS过程中最常用的一些用法,并对文档中不够清晰具体的内容,

探究Javascript模板引擎mustache.js使用方法 我们将为大家详解Mustache.js轻量级JavaScript模版引擎使用方法。简单示例functionshow(t){$("#content").html(t);}varview={title:'YZF',cacl:function(){return6+4;}};$("#content").html

标签: webgl fbo

本文链接地址:https://www.jiuchutong.com/biancheng/382786.html 转载请保留说明!

上一篇:JS组件中bootstrap multiselect两大组件较量(javascript 组件)

下一篇:JS正则表达式比较常见用法(js正则表达式变量)

  • 个税申报吗
  • 稿酬所得个人所得税税率表
  • 购买信息技术服务费摘要怎么写
  • 企业所得税税率
  • 5个点的税率是多少
  • 退休工资要缴纳税吗
  • 商场收取租户电费怎么处理税收?
  • 货运代理公司排名前十
  • 扣缴外国企业所得税分录
  • 纳税评估怎么办
  • 公司开出的经济补偿金可以税前扣除吗
  • 微小企业税率由3%变为1%客户要求降价
  • 增值税扣税项目范围
  • 培训费可以抵扣企业所得税
  • 直接收费金融服务、提供贷款服务和金融商品转让税率
  • 个体工商户允许哪些经营范围
  • 空调作为固定资产吗
  • 房地产企业预售收入作为业务招待费
  • 企业已确认销售收入的售出商品发生销售折让,且不属于
  • 小规模纳税人的专票可以抵税吗
  • 股东分红账务处理后报表怎么处理
  • 施工企业临时设施属于
  • php中substr()
  • 家装行业如何确认收入
  • 怎么添加动态磁贴
  • 小微企业减免额怎么计算
  • dvd.rom
  • 发票是否可以作为收款依据
  • 营业外收入的会计要素
  • mysql.php
  • 前端的基本知识
  • 在筹建期间发生的开办费
  • java项目中redis使用实例
  • 增值税专用发票和普通发票的区别
  • 学前端的可以是什么专业的
  • 目标检测 2021
  • checksum命令
  • MySQL分表和分区最佳攻略
  • 税控盘开票日期一般截止到下个月几号
  • 法人如何提取公积金余额
  • mongodb创建库
  • 资源税类的税种是
  • 设备出租当月要确认收入吗
  • 一般纳税人领票提交什么资料
  • 平台的分销佣金是多少
  • 旅游业营改增会计分录
  • 黄金珠宝加工销售怎么样
  • 什么情况下固定资产进项税不能抵扣
  • 进口货物发生纳税义务时间为
  • 银行股分红划算吗
  • 公司账户存定期利息
  • 货物逾期保管费怎么算
  • 融资租赁中承租人的义务
  • 民非企业怎么给员工交五险
  • 应收账款占比高受哪些因素影响
  • 税控设备维护费会计分录
  • 无进项发票开具销项发票
  • 固定资产清理时累计折旧提完了怎么账务处理
  • 哪些税费计入税金及附加科目
  • 空调的折旧年限是多少年的
  • mysql unique option prefix myisam_recover instead of myisam-recover-options的解决方法
  • sql多条件组合查询
  • mac怎么用浏览器
  • win7能不能安装vs2019
  • linux基本使用
  • imessage如何群发
  • win8的显示设置
  • linux操作系统内核
  • 批处理注册reg文件
  • 批处理命令在windows操作中的典型应用
  • Unity 相关经典博客资源总结(持续更新)
  • react.development.js
  • javascript学习指南
  • 电子税务局跨区域
  • 重庆国税电子税务局手机版
  • 深圳国税地税怎么申报
  • 个人医保缴费证明怎么打印
  • 企业所得税优惠事项管理目录2023
  • 个人独资企业如何避税
  • 辽宁国税征期日历
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设