WebGL 绘制Line的bug(一)

简介: WebGL 绘制Line的bug(一)

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


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


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


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


微信图片_20220423102811.jpg


macOS chrome测试效果


用firefox试试:


微信图片_20220423102934.jpg


macOS下firefox测试结果


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


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


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


微信图片_20220423103151.jpg


Line width bug

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


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


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


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


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





相关文章
|
6月前
|
移动开发 JavaScript 小程序
uView Line 线条
uView Line 线条
72 0
|
定位技术 API
基于Leaflet.draw的自定义绘制实战
本文介绍了如何基于leaflet.draw进行自定义绘制,同时获取对象的bbox和geojson信息。
801 0
基于Leaflet.draw的自定义绘制实战
|
6月前
|
移动开发 小程序 API
uniapp组件库Line 线条 的适用方法
uniapp组件库Line 线条 的适用方法
317 0
ThreeJS 动画之 Noisy Lines
ThreeJS 动画之 Noisy Lines
69 1
|
6月前
|
监控 API 计算机视觉
OpenCV这么简单为啥不学——1.4、基础标识绘制(绘制线line函数、rectangle函数绘制四边形、circle函数绘制圆形、putText函数绘制文字、putText绘制中文文字)
OpenCV这么简单为啥不学——1.4、基础标识绘制(绘制线line函数、rectangle函数绘制四边形、circle函数绘制圆形、putText函数绘制文字、putText绘制中文文字)
66 0
EasyX趣味化编程note2,绘制基本图形(下)
EasyX趣味化编程note2,绘制基本图形(上)
135 0
|
开发者 Windows
EasyX趣味化编程note2,绘制基本图形(上)
EasyX趣味化编程note2,绘制基本图形
71 0
|
前端开发 JavaScript 程序员
前端通过range制作的rgba配色小工具
制作一个针对视觉的产品,快速调出想要的颜色,然后写在给前端程序员的文档里,方便前端程序员进行页面的配色处理[滑稽]
|
编解码 iOS开发 MacOS
Alien Skin Exposure2023调色滤镜插件RAW后期处理工具
Exposure2023是一款专为摄影艺术设计的图像编辑器。新的 Exposure2023结合了专业级的照片调整、庞大的华丽照片库和令人愉悦的高效设计。可以提供最大,最准确的电影外观选择。Exposure的创意外观不仅限于电影模拟,从干净优雅的现代风格到引人注目的色彩变化。您可以自定义Exposure的每个内置外观,然后将其另存为能够表达自己风格的独特外观。只需单击一下,即可重复使用自定义的预设,以在所有工作中获得一致的外观。
144 0
Revit二次开发—修改元素的Material Color(图形颜色)
Revit二次开发—修改元素的Material Color(图形颜色)
Revit二次开发—修改元素的Material Color(图形颜色)