熟悉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之绘制三维地球。
看的懂,需要自己具备对js有自己的理解,原型链,this的指向,c++,webgl的基本理解和使用,ip地址是不能看的,因为播放的流量都是收费的,如果你们有ip,可以连接你们自己的ip地址,逻辑就是这样的逻辑,你让我分析...
网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画特效。(抖音资料)网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画特效。(抖音资料)网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画...
:tangerine: image3D使用webGL绘制三维图片。:bar_chart::chart_increasing::party_popper: Drawing three-dimensional images using webGL.鉴于当前浏览器支持情况,本项目只支持webGL 1上下文,更高级版本未来会...
WebGLVolumeRendering, WebGL体绘制容易 WebGL体绘制容易一个非常简单的步骤介绍像素着色器体渲染使用和 ThreeJS 。转到 http://lebarba.com/blog/ 一步教程中的步骤在 GitHub http://www.lebarba.com/WebGL/
WebGL 3D雪花飘落动画特效是一款适合用作网页背景特效下载。
有兴趣刚需的可以自己下载,非常实用的特效代码,可以完美运行,有能力的还可以二次修改!
WebGL 是一项在网页上渲染三维图形的技术,也是HTML5 草案的一部分。 《WebGL编程指南》的主要篇幅讲解了WebGL 原生API 和三维图形学的基础知识,包括渲染管线、着色器、矩阵变换、着色器编程语言(GLSL ES)等等,...
一种可以在基于WebGL技术的主流浏览器上显示巨量二维矢量文本文字而不会明显增加浏览内存消耗和明显增加前端网页转化文本矢量数据所需时间的技术。通过此技术可以在一些低配置的设备上展示WebGL时当展示内容含有巨量...
webgl入门-基础矩形绘制
webgl入门-基础三角形绘制
小游戏webgl与canvas2d混合使用demo,将context2d作为纹理用webgl绘制
Sierpinski_Triangle WebGL Sierpinski三角形
利用WebGL实现的一个矢量字段(vector field)浏览器
本书?前可以?把?教你使用WebGL进行编程,?且在不断更 新。
webgl载入模型webgl载入模型webgl载入模型 webgl载入模型webgl载入模型webgl载入模型
Unity通用WebGL模板Universal WebGL Template 1.2.1 仅供学习,请勿商用。
一个用于重新创建轮子的玩具 WebGL 引擎。 启动示例 您需要安装 ,然后从目录运行npm install一次。 然后运行: npm run draw-arrays npm run draw-elements npm run draw-boxes npm run draw-textures npm run ...
untiy webgl 打开 PDF文件