今天说点跟WebGL相关的事儿,不知道大家有没有碰到过类似的烦恼。

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

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

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

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

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

用firefox试试:

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

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

https://bugs.chromium.org/p/chromium/issues/detail?id=60124

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

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

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

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

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

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

无插件纯Web 3D机房,HTML5+WebGL倾力打造

WebGL 绘制Line的bug(一)的更多相关文章

  1. WebGL 绘制Line的bug(二)

    上一篇文章简单介绍了WebGL绘制Line的bug,不少朋友给我发了私信,看来这个问题大家都遇上过哈.今天这篇文章会讲述解决这个问题的work around. 基本思路 上一篇文章结尾简单提了下解决的 ...

  2. WebGL 绘制Line的bug(三)

    之前铺垫了许多,今天可以来分享点纯干货了. 上一篇已经讲述了通过面模拟线条时候,每一个顶点的顶点数据包括:端点坐标.偏移量.前一个端点坐标.后一个端点坐标,当然如果我们通过索引的方式来绘制的话,还包括 ...

  3. WebGL绘制有宽度的线

    WebGL中有宽度的线一直都是初学者的一道门槛,因为在windows系统中底层的渲染接口都是D3D提供的,所以无论你的lineWidth设置为多少,最终绘制出来的只有一像素.即使在移动端可以设置有宽度 ...

  4. 利用javascript和WebGL绘制地球 【翻译】

    利用javascript和WebGL绘制地球 [翻译] 原翻译:利用javascript和WebGL绘制地球 [翻译] 在我们所有已知的HTML5API中,WebGL可能是最有意思的一个,利用这个AP ...

  5. WebGL绘制有端头的线

    关于WebGL绘制线原理不明白的小伙伴,可以看看我之前的文章WebGL绘制有宽度的线.这一篇我们主要来介绍端头的绘制,先看效果图. 端头一般被称为lineCap,主要有以下三种形式: butt最简单等 ...

  6. 一篇文章理清WebGL绘制流程

    转自:https://www.jianshu.com/p/e3d8a244f3d9 目录 初始化WebGL环境 顶点着色器(Vertex Shader)与片元着色器(Fragment Shader) ...

  7. FireFox下Canvas使用图像合成绘制SVG的Bug

    本文适合适合对canvas绘制.图形学.前端可视化感兴趣的读者阅读. 楔子 所有的事情都会有一个起因.最近产品上需要做一个这样的功能:给一些图形进行染色处理.想想这还不是顺手拈来的事情,早就研究过图形 ...

  8. WebGL入门教程(二)-webgl绘制三角形

    前面已经介绍过了webgl,WebGL入门教程(一)-初识webgl(http://www.cnblogs.com/bsman/p/6128447.html),也知道了如何绘制一个点,接下来就用web ...

  9. WPF-22:WPF绘制五角星改进版(增加半个五角星的绘制)-修改bug

    之前用坐标画多边形的方法,绘制五角星.今天调试时发现当时写的时候有bug,修改一下. 原文: http://blog.csdn.net/yysyangyangyangshan/article/deta ...

随机推荐

  1. CodeForces 13A【暴力】

    题意: 给你的一个十进制数n,计算对于2~n-1进制下的每个位相加和与数n-2的比值. 思路: n是1000,所以直接暴力一发? #include<cstdio> #include< ...

  2. HDU1016【简单递归.DFS】

    题意:一个环,相邻相加是素数. 思路: 直接深搜就好了.. output limit exceed 了好几发... 因为那个while里面的scanf前面的"~" 后来搜了outp ...

  3. hdoj1074【A的无比爆炸】

    啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊,一开始我就不知道怎么写,然后看了题解是状压DP,后来去看了看状压DP也就这样嘛,但是难点,可以说是不熟悉的地方吧...如下: 第一.我们能很快的知道状压DP的原理: ...

  4. AT2534 港湾設備 (Port Facility)

    洛谷 先膜一下Iscream巨巨 首先我们可以把题目转化为线段覆盖,如果两条线段相交(不算某一条完全在另一条里面的情况),那么这两条线段代表的集装箱就不能放到同一个栈里,我们在它们之间连一条边.如果图 ...

  5. 《编译原理》-用例题理解-自顶向下语法分析及 FIRST,FOLLOW,SELECT集,LL(1)文法

    <编译原理>-用例题理解-自顶向下语法分析及 FIRST,FOLLOW,SELECT集,LL(1)文法 此编译原理确定某高级程序设计语言编译原理,理论基础,学习笔记 本笔记是对教材< ...

  6. python 列表 元组

    1.列表的基本声明和赋值 #声明一个空列表 变量 = [] 或者 变量 = list() var = [1] var2 = list() # 声明带有数据的列表 var = [1,2,3,'一','二 ...

  7. SQL-添加字段处理

    1.alter   table   [dbo].[SiteTracks]   drop   constraint   DF__SiteTrack__Audit__47DBAE452.ALTER TAB ...

  8. LPS UVA 11404 Palindromic Subsequence

    题目传送门 题意:求LPS (Longest Palidromic Subsequence) 最长回文子序列.和回文串不同,子序列是可以不连续的. 分析:1. 推荐->还有一种写法是用了LCS的 ...

  9. Sereja and Brackets(括号匹配)

    Description Sereja has a bracket sequence s1, s2, ..., sn, or, in other words, a string s of length  ...

  10. [已读]Sass与Compass实战

    介绍了Sass基础语法与Compass框架,这个网上参考文档就OK了,另外介绍了compass生成图片精灵和相应的css,貌似现在单纯用sass和compass的挺少,要不grunt,要不FIS,而g ...