资讯专栏INFORMATION COLUMN

WebGL 绘制Line的bug(一)

Karrdy / 3062人阅读

摘要:然而,不幸的是,在绘制线条的时候,存在一个缺陷,那就是在一些机器的一些浏览器上面应该是大多数情况下线宽只能设置为,而不能设置成其他的值。下一篇将会介绍如何通过三角形面的方式来模拟线条的绘制。

插播一则广告(长期有效)

MONO哥需要在武汉招JavaScript工程师若干
要求:对前端技术(JavasScript、HTML、CSS),对可视化技术(Canvas、WebGL)有浓厚的兴趣
基础不好的可培养,基础好的可共谋大事
感兴趣的给我发邮件:hr@servasoft.com

------------------------------------------------------------正文的分割线----------------------------------------------------------------

今天来谈点跟WebGL有关的事儿,不知道大家有没有碰到过类似的困扰。

熟悉WebGL的同学都知道,WebGL绘制模式有点、线、面三种;通过点的绘制可以实现粒子系统等,通过线可以绘制一些连线关系;面就强大了,通过面,我们可以绘制我们想绘制的所有的三维对象。

一切看起来都很完美,perfect。

然而,不幸的是,WebGL在绘制线条的时候,存在一个缺陷,那就是在一些机器的一些浏览器上面(应该是大多数情况下)线宽只能设置为1,而不能设置成其他的值。

通过网址http://alteredqualia.com/tmp/...,我们可以测试自己的电脑是否有线宽的不能设置的bug,以下是我的电脑(mac 电脑)用chrome(版本59.0.3071.115)的测试效果:

(麻蛋,以前的mac 下的chrome是好使的,看来这病越来越严重了)

用firefox试试:

在firefox下面看来还是正常的。

事实上,这是一个长久以来一直存在的bug,下面这个地址就是证明:

https://bugs.chromium.org/p/c...

很早之前就有人提过了,只是一直没有解决。

这是病,得治,只是那些搞浏览器大佬们不想出药。

我们就只能想点偏方来自己治疗了。 

偏方是啥,由于Line的线宽是底层问题,我们并不好解决;不过,我们可以考虑通过面的绘制来模拟线,线的特点就是不随镜头变化而改变宽度,只要能够达到这个特点就可以达到模拟的效果。

下一篇将会介绍 如何通过三角形(面)的方式来模拟线条的绘制。

如果你对WebGL 感兴趣,可以了解下我们用WebGL开发的3D机房项目:

HTML5,不只是看上去很美(第二弹:打造最美3D机房)

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/56417.html

相关文章

  • WebGL 绘制Linebug(二)

    摘要:以两个端点组成的线段为例,绘制的时候只用指定两个端点,如果通过三角形来模拟一条线段,则至少需要两个三角形,如下图这是两个三角形模拟的线段。对于一条线段而言,控制的参数实际上只有两个端点的坐标和线的宽度。下一篇将贴上相关代码说明。 插播一则广告(长期有效) MONO哥需要在武汉招JavaScript工程师若干要求:对前端技术(JavasScript、HTML、CSS),对可视化技术(Ca...

    william 评论0 收藏0
  • WebGL 绘制Linebug(三)

    摘要:读者,可以结合第二篇的思路和上面的代码来来理解,此处不再详述代码的细节。如果你对感兴趣,可以了解下我们用开发的机房项目,不只是看上去很美第二弹打造最美机房关于这个话题就先分享到这里了,如果大家对其它方面与兴趣的,我们也可以一起来探讨。 插播一则广告(长期有效) **MONO哥需要在武汉招JavaScript工程师若干要求:对前端技术(JavasScript、HTML、CSS),对可视化...

    Drummor 评论0 收藏0
  • TWaver3D直线、曲线、曲面绘制

    摘要:类权威书籍非均匀有理样条第版非均匀有理样条,通常简称为实际上已经成为利用计算机处理集合信息时用于形状的表示设计和数据交换的工业标准。而一般的直线,曲线是很难达到这样效果的,所以引入了曲线。 插播一则广告(长期有效) MONO哥需要在武汉招JavaScript工程师若干要求:对前端技术(JavasScript、HTML、CSS),对可视化技术(Canvas、WebGL)有浓厚的兴趣基础不...

    codecraft 评论0 收藏0
  • WebGL 单通道wireframe渲染

    摘要:那是因为,线条的光栅化过程和多边形的光栅化过程并不是完全一致的。这将会导致一些本该被隐藏的线段,未被遮挡。原理我们知道,一般对象都是由三角形组成的。其中涉及到和的相关介绍,笔者将会在后续的文章中介绍。 如果要把一个对象的线框绘制出来,一般的方法是先绘制实体对象,然后通过gl.LINES的模式再绘制一遍模型,此时模型的线框就会被绘制出来。 gl.LINES的问题 此方法需要绘制两遍对象...

    KoreyLee 评论0 收藏0
  • WebGL2系列之图元重启

    摘要:在中,可以通过图元重启的特性来解决这个问题。图元重启可以绘制分散的三角形或者线段。代码片段下面的代码,在定义的数组中加入了图元重启标志 背景 在使用WebGL绘制图形的时候,大多数情况下,绘制一个图形的时候,其各个图元都是相连的。 但是在一些情况下,我们需要绘制图元不相连的图形,如果绘制的模式是gl.TRAINGLES或者gl.LINES,也是可以达到的,但是如果绘制的模式是gl.TR...

    mj 评论0 收藏0

发表评论

0条评论

Karrdy

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<