WebGL 绘制Line的bug(一)

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

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

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

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

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

用firefox试试:

macOS下firefox测试结果
在firefox下面看来还是正常的。

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

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

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

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

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

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

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

更多精彩内容,请关注公众号。

更多精彩内容,请关注公众号: ITman彪叔

原文地址:http://blog.51cto.com/13842424/2139906

时间: 2024-10-31 18:29:47

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

WebGL 绘制Line的bug(三)

上一篇已经讲述了通过面模拟线条时候,每一个顶点的顶点数据包括:端点坐标.偏移量.前一个端点坐标.后一个端点坐标,当然如果我们通过索引的方式来绘制的话,还包括索引数组,下面的代码通过传递一组线条的端点数组来创建上述相关数据:?```bk.Line3D = function (points,colors){? ? ?this.points = points;? ? ?this.colors = colors;} bk.Line3D.prototype.computeData = function()

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

利用javascript和WebGL绘制地球 [翻译] 原翻译:利用javascript和WebGL绘制地球 [翻译] 在我们所有已知的HTML5API中,WebGL可能是最有意思的一个,利用这个API我们能够在浏览器中创造出炫酷3D场景的能力.本文将完整的向你展示一些炫酷是如何实现的. 需要特别指出的是,这篇教程我们将会构建一个地球行星模型,这个模型可以像一个兴奋的人一样环绕的旋转,另外,它可能使我们可以获得一些其他程序员的称赞,好吧,就这么多了. 准备 这篇教程我们将会用到一个令人着迷的We

webGL 绘制图形

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

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

前面已经介绍过了webgl,WebGL入门教程(一)-初识webgl(http://www.cnblogs.com/bsman/p/6128447.html),也知道了如何绘制一个点,接下来就用webgl画出一个三角形. 效果图: 在WebGL入门教程(一)-初识webgl中,知道如何绘制一个点 //绘制一个点 gl.drawArrays(gl.POINTS, 0, 1); 但是图形是有多个点组成,那么就应该考虑如何绘制多个点,WebGL提供了一种很方便的机制,缓冲区对象(buffer obje

WebGL 绘制和变换

1.使用缓冲区对象向顶点着色器传入多个顶点的数据,需要遵循以下五个步骤: 1.1 创建缓冲区对象(gl.createBuffer()). 1.2 绑定缓冲区对象(gl.bindBuffer()). 1.3 将数据写入缓冲区对象(gl.bufferData()). 1.4 将缓冲区对象分配给一个attribute变量(gl.vertexAttribPointer()). 1.5 开启attribute变量(gl.enableVertexAttribArray()). 2.创建缓冲区对象(gl.cr

webgl 绘制三角形 2.1

我的娘噶, 我真的学的太慢了, webgl,不行得加快脚楽. 上节课就是随便介绍了一下webgl, 这节课的知识特别的多呢. 感觉得分为两次讲呢. 你就随着我的脚步慢慢走吧. 一 .首先,介绍一下,webgl里面的 坐标系.右手坐标系.不说了,直接上图 这就不用介绍了吧, 伸出你的右手比划一下,Z轴是穿出你的屏幕的,刺向你的哦, 不要眨眼, 不会伤害你的眼睛, 不过温馨提示,注意休息眼睛哦. 二 . 介绍两个shader, 与显卡GPU有关 1.vertexShader: 顶点shader, 以

TWaver3D直线、曲线、曲面的绘制

插播一则广告(长期有效) TWaver需要在武汉招JavaScript工程师若干 要求:对前端技术(JavasScript.HTML.CSS),对可视化技术(Canvas.WebGL)有浓厚的兴趣 基础不好的可培养,基础好的可共谋大事 感兴趣的给我发邮件:[email protected] ————————————————————正文的分割线—————————————————————- 今天来说关于绘图的那些事儿. 先说说绘图引擎的种类.目前市面上绘图引擎大致可以分为两类.一类基于HTML技术,

图解 WebGL &amp; Three.js 工作原理

1.WebGL背后的工作原理是什么? 2.以Three.js为例,讲述框架在背后扮演什么样的角色? 我们为什么要了解原理? 我们假定你对WebGL已经有一定了解,或者用Three.js做过了一些东西,这个时候,你可能碰到了这样一些问题: 1.很多东西还是做不出来,甚至没有任何思路: 2.碰到bug无法解决,甚至没有方向: 3.性能出现问题,完全不知道如何去优化. 这个时候,我们需要了解更多. 1.什么是矩阵? 简单说来,矩阵用于坐标变换,如下图: 2.那它具体是怎么变换的呢,如下图: 3.举个实

High-speed Charting Control--MFC绘制图表(折线图、饼图、柱形图)控件

原文地址:https://www.codeproject.com/articles/14075/high-speed-charting-control 本文翻译在CodeProject上的介绍(主要还是谷歌翻译,看不太明白的地方,请对比原文,敬请原谅),方便自己和后面人的学习(花费了两天时间,希望是值得的).推荐一个前辈写的东西:TeeChart替代品,MFC下好用的高速绘图控件-(Hight-Speed Charting),自己也转载了这篇文章,在转载的文章中根据自己的实验修改了一些东西,修改