位置: 编程技术 - 正文

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正则表达式变量)

  • 网上代增值税开错不退
  • 小规模纳税人的账务处理
  • 缴纳房产税怎么记账
  • 生产设备保险费会计分录
  • 企业向个人借款是否合法
  • 什么叫备抵科目,什么叫过渡科目
  • 煤炭企业会计核算办法
  • 滞留票的处理
  • 怎么办开户许可证
  • 进项税已入账未结转
  • 政府转账捐赠怎么做分录
  • 应收账款贷方余额怎么处理
  • 公司拖欠工资还要继续工作吗?
  • 季度所得税预缴可以弥补以前年度亏损吗
  • 年收入12万申报人数
  • 固定资产原值是含税还是不含税
  • 抵免税款收益算其他收益吗
  • 小微企业增值税最新优惠政策
  • 房地产企业预缴增值税及附加税
  • 现金福利需要发票吗
  • 外地职工医保怎么报销
  • 残保金征收单位
  • 投资者与被投资者的名人
  • 赠送的商品怎么入库 企业会计准则
  • 反射动态创建对象
  • 销售收入的暂估入账
  • 餐饮发票可以计入研发费用吗
  • pytorch的
  • 小规模纳税人冲红发票怎么报税
  • PHP:Memcached::touch()的用法_Memcached类
  • 留底的进项税额记哪儿?
  • 记账凭证不见了怎么办
  • 汽车消费税有发票吗
  • 电脑语言栏不见了,打不出汉字
  • php @method
  • 前端处理map
  • insg命令
  • 充电桩折旧年限是多少年
  • 性能优化模式
  • 票据权利的取得要件
  • 加班补贴费
  • 为什么增值税发票不能折叠?
  • 企业接受投资者投资,投资者超额缴入的资本
  • 清税证明怎么在网上申请
  • 资金占用费的税费是多少
  • 固定资产直接记入费用科目
  • 取得交易性金融资产支付的相关税费计入
  • 进项税额转出的所有会计分录
  • 进口葡萄酒政策
  • 计提的管理费用要结转吗
  • 中小企业的判定标准
  • 规模以上企业纳税要求
  • 快递公司的会计都需要做什么
  • 现金流量表补充资料的作用
  • 企业所得税审计调整分录
  • 红冲发票视频教程
  • 增值税版本升级
  • 三大财务报表英文
  • 应付账款怎么做平
  • 建账时应取得哪些资料
  • mysql必知必会读书心得
  • sqlserver批量执行sql脚本
  • sql server使用的是什么逻辑模型
  • win10下mysql 5.7.17 zip压缩包版安装教程
  • window10 uwp
  • mac的qq缓存在哪里怎么打开
  • centos安装插件
  • 比较常见的成语有哪些
  • linux的收获
  • linux系统init命令
  • 一岁的宝宝可以喝枸杞水吗
  • cocos2d
  • cocos2dx HelloWorld代码分析
  • 文章标题作用答题模板
  • a标签的href点击怎么不跳转
  • javascript面向对象精要
  • python程序讲解
  • 地方税务局和国家税务局合并
  • 公路客运购票
  • 江苏电子税务局网址
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设