WebGL 中的一些选项
WebGL 中开启颜色混合(透明效果)
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

设置遮挡剔除有效。生成三角形时,沿着逆时针方向的那面会被生成出来,而另一面就不会生成出来。

gl.enable(gl.CULL_FACE);
gl.cullFace(gl.BACK);

观察球面的效果:

当设置透明效果却不开启遮挡剔除的时候,用 web GL 生成球面,在球外观察球面时就会看到一些奇怪的角。

第二个球就很明显的有一些不同的部分。

在 web GL 中使用矩阵

可以利用矩阵的平移、旋转、缩放实现物体的各种动作。

我在最开始使用 Web GL 绘图的时候,球面上的点都是利用循环得到,但是由于有缩放球面的需求,所以最开始的做法是

1. 创建缓冲区时用的 gl.DYNAMIC_DRAW

2. 当要缩放球面时,重新计算顶点

3. 用 gl.updateBufferData 函数更新定点数据

当缩放的时候就能明显看到画面撕裂,帧率下降。

可能的原因是:

1. 每次重新计算都要使用大量的计算资源,若帧率为 60,那么每秒要计算上千个顶点,如果球面较精细,那么需要计算的顶点数更多。

2. 并且每次计算之后都要将这些顶点传入到 GPU 中,可能会占用一部分的传输带宽

正常的做法是用坐标变换矩阵,将变换后的矩阵通过  gl.uniformMatrix4fv 传入到着色器,就可以轻松的实现平移旋转和缩放。并且不会造成性能严重下降。

但是矩阵的乘法与普通的数乘有所差别,矩阵的乘法一般不满足交换律。

若 pMatrix 表示透视矩阵,vMatrix 表示视图矩阵,mMatrix 表示模型矩阵,aVertex 表示传入的顶点,那么一般的乘式是

gl_Position = pMatrix * vMatrix * mMatrix * aVertex;

如果矩阵的顺序不同,可能最后得到的图形也就不同。

对矩阵先进行旋转操作,再进行平移操作。缩放操作的顺序一般没有影响。

但我在使用 gl-Matrix.js 时,对一个矩阵先进行旋转,再进行平移操作:

 mat4.identity(this.mMatrix);

 mat4.fromRotation(this.mMatrix, angle[1] * Math.PI*2, [0, 0, 1]);
mat4.rotate(this.mMatrix, this.mMatrix, angle[0] * Math.PI, [0, 1, 0]);
mat4.translate(this.mMatrix, this.mMatrix, pos); mat4.multiply(mvpMatrix, pvMatrix, this.mMatrix);
gl.uniformMatrix4fv(uniforms.pmv_matrix, false, mvpMatrix);

和将旋转操作和平移操作放在两个矩阵中进行得到的结果并不相同。

 mat4.identity(this.mMatrix);

 mat4.fromRotation(this.rMatrix, angle[1] * Math.PI*2, [0, 0, 1]);
mat4.rotate(this.rMatrix, this.rMatrix, angle[0] * Math.PI, [0, 1, 0]);
mat4.translate(this.mMatrix, this.mMatrix, pos);
mat4.mul(this.mMatrix, this.mMatrix, this.rMatrix); mat4.multiply(mvpMatrix, pvMatrix, this.mMatrix);
gl.uniformMatrix4fv(uniforms.pmv_matrix, false, mvpMatrix);

注意这里用 pvMatrix 乘  mMatrix 之前先用 mMatrix 乘了一个附加矩阵 rMatrix

具体的原因并不清楚,但是第二个操作实现的图像符合我的需求。

=========================

这几天又重新测试了下代码,发现上面的旋转平移操作的矩阵还是有些问题,

具体问题在于经过旋转平移后的面上反的,以下矩阵操作可以方便的做到旋转平移,并且得到的面上正的

 mat4.fromZRotation(this.rMatrix,         this.beta);   // 绕 Z 轴旋转 beta 角
mat4.rotateY(this.rMatrix, this.rMatrix, this.theta); // 再绕 Y 轴旋转 theta 角
mat4.fromRotationTranslation(this.mMatrix, this.rMatrix, pos);
mat4.rotateZ(this.mMatrix, this.mMatrix, this.beta);
mat4.rotateY(this.mMatrix, this.mMatrix, this.theta);

最后得到的面就是我想要的

完整的代码可以在我的 GitHub 上查看。

WebGL 踩坑系列-1的更多相关文章

  1. WebGL 踩坑系列-3

    WebGL 踩坑系列-3 绘制球体 在 WebGL 中绘制物体时需要的顶点是以直角坐标表示的, 当然了,gl_Position 是一个四维的向量,一般将顶点赋值给 gl_Position 时,最后一维 ...

  2. WebGL 踩坑系列-2

    需求:绘制斑点在球面上走过的路径 思路:要绘制斑点在球面上走过的路径,首先要记录上一时刻和当前时刻该斑点所在球面的位置,并且实时更新当前时刻的斑点位置和上一时刻的斑点位置. 为了方便,上一时刻斑点所在 ...

  3. jmeter踩坑系列

    1.踩坑系列一: 抓包出来有host的字段,放到jmeter里面一起请求就报错了,去掉就请求正常了 1.踩坑系列二: 从花瓶复制过去 的values 前面有空格,肉眼看起来没有

  4. python踩坑系列之导入包时下划红线及报错“No module named”问题

    python踩坑系列之导入包时下划红线及报错“No module named”问题 使用pycharm编写Python时,自己写了一个包(commontool),在同级另一个路径下(fileshand ...

  5. 踩坑系列の Oracle dbms_job简单使用

    二话不说先上代码 --创建存储过程 create or replace procedure job_truncateState is begin --此处就是要定时执行的sql execute imm ...

  6. Vue踩坑系列

    前言 前端开发对于vue的使用已经越来越多,它的优点就不做介绍了, 本篇是我对vue使用过程中遇到的问题中做的一些总结,帮助大家踩坑.如果喜欢的话可以点波赞,或者关注一下,希望本文可以帮到大家!!! ...

  7. 踩坑系列:MySql only_full_group_by配置,竟导致所有应用报错?

    1. 踩坑经历 一个很平常的下午,大家都在埋头认真写bug呢,突然企业微信群里炸锅了,好多应用都出现大量的Error日志,而且都报同一个错误,就是下面这个: Caused by: com.mysql. ...

  8. 【踩坑系列】使用long类型处理金额,科学计数法导致金额转大写异常

    1. 踩坑经历 上周,一个用户反馈他创建的某个销售单无法打开,但其余销售单都可以正常打开,当时查看了生产环境的ERROR日志,发现抛了这样的异常:java.lang.NumberFormatExcep ...

  9. electron踩坑系列之一

    前言 以electron作为基础框架,已经开发两个项目了.第一个项目,我主要负责用react写页面,第二项目既负责electron部分+UI部分. 做项目,就是踩坑, 一路做项目,一路踩坑,坑多不可怕 ...

随机推荐

  1. MVVM模式下WPF动态绑定展示图片

    MVVM模式下WPF动态展示图片,界面选择图标,复制到项目中固定目录下面,保存到数据库的是相对路径,再次读取的时候是根据数据库的相对路径去获取项目中绝对路径的图片展示. 首先在ViewModel中 / ...

  2. socket socket讲解

    socket  socket讲解 一.socket是何物? 参考百度百科: http://baike.baidu.com/link?url=4YNURsJLEaL0II79C68gPUoYKliXWJ ...

  3. 用ES6的class模仿Vue写一个双向绑定

    原文地址:用ES6的class模仿Vue写一个双向绑定 点击在线尝试一下 最终效果如下: 构造器(constructor) 构造一个TinyVue对象,包含基本的el,data,methods cla ...

  4. H5教程(二),CSS入门(一)选择器

    这是我的第二篇博客,H5教程CSS入门,适合刚开始学习H5的新手,让我们共同进步. 1.  CSS简介 1.1  CSS是什么? CSS称为样式层叠表,是用于增强或控制网页样式,并允许将样式信息与网页 ...

  5. P1402 酒店之王 最大流

    \(\color{#0066ff}{ 题目描述 }\) XX酒店的老板想成为酒店之王,本着这种希望,第一步要将酒店变得人性化.由于很多来住店的旅客有自己喜好的房间色调.阳光等,也有自己所爱的菜,但是该 ...

  6. 平衡树学习笔记(3)-------Splay

    Splay 上一篇:平衡树学习笔记(2)-------Treap Splay是一个实用而且灵活性很强的平衡树 效率上也比较客观,但是一定要一次性写对 debug可能不是那么容易 Splay作为平衡树, ...

  7. 牛客寒假算法基础集训营4 F Applese 的大奖

    链接:https://ac.nowcoder.com/acm/contest/330/H来源:牛客网 Applese 和它的小伙伴参加了一个促销的抽奖活动,活动的规则如下:有一个随机数生成器,能等概率 ...

  8. winfom实现关闭后一直运行

    using PLog; using System; using System.Collections.Generic; using System.Diagnostics; using System.L ...

  9. 2015苏州大学ACM-ICPC集训队选拔赛(2)1004

    草爷要的数 Problem Description 今天校队队员们准备放松一下,我们队就准备选一些数字玩,然而每个人喜欢的数字是不同的,刻盘喜欢x(1<=x<=1^9),凯凯喜欢y(1&l ...

  10. datatables通过ajax调用渲染数据,怎么根据数据给td添加class

    html: <table id="table8" cellpadding="0" cellspacing="0" border=&qu ...