WebGL 绘制Line的bug（一）

最新推荐文章于 2025-06-08 09:03:43 发布
最新推荐文章于 2025-06-08 09:03:43 发布
阅读量1.5k 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： WebGL 3d可视化 HTML5 bug 3D机房
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/twaver/article/details/75640152
WebGL在绘制线条时存在一个bug，线宽在某些机器和浏览器上只能设为1。这个问题在Chrome中尤为明显，而在Firefox中表现正常。尽管已知很久，但尚未得到修复。为解决此问题，可以考虑使用面的绘制来模拟线，通过三角形构建不随镜头变化的线宽效果。下篇将详细介绍如何实现这一模拟方法。同时，推荐对WebGL感兴趣的读者关注使用WebGL开发的3D机房项目。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

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

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

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


（麻蛋，以前的mac 下的chrome是好使的，看来这病越来越严重了）

用firefox试试：

最低0.47元/天 解锁文章

200万优质内容无限畅学
Threejs（WebGL）绘制线段优化：Shader修改gl.LINES模式为gl.LINE_STRIP
dabaooooq的博客
05-31 1585
场景中有大量的非连续线段，每条线段由大量的点构成（曲率较大），并且需要合并渲染，这时，一般考虑使用LineSegments画线，因为LineSegments底层是基于 gl.LINES 的WebGL标准进行绘制，v0 v1、 v1 v2、 v2 v3、 v3 v4.......但是，这种方法会有一定代价。
WebGL 绘制Line的bug(二)
TWaver可视化
07-25 1115
WebGL 绘制Line的bug(二)
WebGL绘制有宽度的线
weixin_34235135的博客
06-25 1710
　　WebGL中有宽度的线一直都是初学者的一道门槛，因为在windows系统中底层的渲染接口都是D3D提供的，所以无论你的lineWidth设置为多少，最终绘制出来的只有一像素。即使在移动端可以设置有宽度的线，但是在拐弯处原生api没有做任何处理，所以往往达不到项目需求，再者比如对于虚线、导航线的绘制，原生api是无能为力。差不多从事WebGL开发已经一周年，总结一下绘制线的方法和踩过的坑，聊以慰...
WebGLStudio.js 3D交互应用开发入门教程
最新发布
gitblog_00177的博客
06-08 279
WebGLStudio.js 3D交互应用开发入门教程 WebGLStudio.js是一个基于WebGL的3D场景编辑器，它允许开发者直接在浏览器中创建和编辑3D场景，并为其添加交互行为。本文将带你快速上手这个强大的工具。 编辑器界面概览 WebGLStudio.js的界面设计简洁明了，主要分为以下几个功能区域： 场景视图(Scene View)：3D场景的实时预览区域 场景树(Scene Tr...
我的webgl学习之路（三）用webgl画线
七岁
05-08 7640
我的webgl学习之路（三）用webgl画线 我们都知道两个点决定一条线段；那么我们怎么画两个点呢？甚至是多个点呢？用gl.vertexAttrib3f(a_Position,1.0,0.0,0.0)循环？实在太麻烦了；那么不得不说的缓冲区对象； 缓冲区：它是webgl提供的一种很方便的机制，它可以一次地向着色器传入多个顶点数据。缓冲区对象是webgl系统中的一块内存区域，我们可以一次性地向缓冲区...
Webgl入门笔记——点、线、面
code for life
05-17 639
webgl1.0文档中对点、线、面进行了陈列，主要包含以下几种方式。 点 点的绘制好像只能拿点精灵绘制，下期再讲解 线 LINES：两点画线 LINE_LOOP：给定三个点，将三个点全部圈到一起，最后弄成闭合的形状。 LINE_STRIP:给定三个点，将三个点连接到一起。 面 TRIANGLES：绘制三角形，三个点构成一个完整的三角形面片。 TRIANGLES_STRIP:绘制三角形方法如下图所示： TRIANGLES_FAN：指的是扇形画图 关键代码： gl.vertexAttribPointer(s
three.js+WebGL踩坑经验合集(1):THREE.Line无故消失的元凶
iloveas2014的专栏
01-23 558
发现这根线就是被视锥剔除过滤掉了，three.js为了优化性能，会让不在画布可视范围（严格来说是个3D的视锥体）内的物体全部不参与渲染，这个线就是这样被过滤走的。可以看到，three.js出于性能考虑，没有把修改顶点和更新包围球两个操作合并到一个方法中，这会让萌新们觉得three.js学习门槛高，易用性差，或者bug很多。然而这次写博客笔者才发现自己的这个做法是错误的，事实上three.js的视锥剔除并不是只检查中心点，而是检查了包围球，检测依据是球心和半径而并非只看中心点。1 把物体的视锥剔除关闭。
three.js+WebGL踩坑经验合集(4.1):THREE.Line2的射线检测问题（注意本篇说的是Line2，同样也不是阈值方面的问题）
iloveas2014的专栏
01-25 1146
不难看出，射线检测的实现代码跟LineMaterial是配套编写的，过程极其相似，但是当时笔者并没有看懂LineMaterial上的trimSegment到底是干嘛用，就在那儿盲目断点了一把，这个过程分享出来没有任何意义，所以就直接给研究结果。运行效果如下，按照代码设定的线条位置和相机参数，它可以工作得很好，但是一旦用鼠标滚轮把镜头拉近，线就会莫名选不中了，只有当整根线都在屏幕范围内的时候，射线检测才能正常。嗯，这下有毛病了，端点在左下角，应该是负一点多才是对的，然而变成了正数，飞到了另一侧去。
three.js+WebGL踩坑经验合集(3):THREE.Line的射线检测问题（不是阈值方面的，也不是难选中的问题）
iloveas2014的专栏
01-25 858
笔者有想过按着代码演算一遍，但是很快就放弃了这一念头，因为除了可读性差，计算过程繁琐以外，笔者还发现了一个漏洞，就是距离的计算全是取的3D坐标，而透视相机因为具备近大远小的效果，所以越是靠近屏幕，两个3D点在投影到2D后的距离也会越大。此外，THREE.Line使用原生的gl.lineWidth设置厚度，然而这个原生的api存在兼容问题，火狐和部分桌面程序能识别，但Chrome不认，那除了粗细为1的线以外，THREE.Line是没有办法玩下去的。是吧，射线检测的结果更接近于具备透视效果的圆柱体。
解决windows下three.js在WebGlRender渲染无法设置线宽linewidth
weixin_34303897的博客
07-25 1485
var mesh = '' function createLines(arr) { if(mesh){ scene.remove(mesh) } var line = new THREE.Geometry(); line.ver...
OpenGL学习笔记2：绘制和混合
键盘春秋的博客
06-18 3954
绘制OpenGL几何图元在使用OpenGL在计算机屏幕上进行绘图时不需要从一个点的绘制开始。我们关心的不是物理屏幕坐标和像素，而是视景体中的位置坐标，我们将从7个由定义的几何图元来开始绘制实心几何图形： 图元 描述 GL_POINTS 每个顶点在屏幕上都是一个单独的点 GL_LINES 每一对顶点定义了一个线段 GL_LINE_STRIP 一个从第一个顶点依次经过每个后
webgl 绘制的时候出现 数据混乱问题 和绘制数据小的问题
七岁
07-27 742
绘制出现混乱问题 加载数据的时候，数据小的时候没有问题，当数据大的时候，就出现数据混乱； 最后找到的原因是 下标我传入的是 类型是：Uint8Array  发现当它保存的数大于255时就会变小，原因是Uint8Array  是8 位，也就是 2的8次方， 也就是它能保存的范围时0 ~ 256 ;当保存为257 的时候，它就变成了1；   绘制数据过大问题： 相关绘制设置： gl .drawE...
Webgl（ThreeJS）3D画线(最新版本画线方式)
蒙双眼看世界
04-26 3156
Webgl（ThreeJS）3D画线
关于 ThreeJS 线宽 lineWidth 无法正常显示 太大 需要缩小 窗口缩放会影响线粗细 等问题
ljason1993的博客
11-06 4309
首先 默认threejs的线宽是无法调节的 这个大家应该都知道 官方可调节案例: https://threejs.org/examples/?q=line#webgl_lines_fat 代码样例(就在右下角 还是贴个防呆链接吧) https://github.com/mrdoob/three.js/blob/master/examples/webgl_lines_fat.html ...
探索WebGL线条艺术：mattdesl/webgl-lines
gitblog_00039的博客
04-26 451
探索WebGL线条艺术：mattdesl/webgl-lines 在这个数字时代，艺术与科技的结合正不断创造出新的视觉体验。是一个开源项目，利用WebGL技术在浏览器中绘制复杂的线条和曲线，为网页设计和交互式应用带来了无限可能。 项目简介 webgl-lines是由开发者Matt DesLauriers创建的一个库，它提供了一种高效且灵活的方式在3D空间中绘制自定义线条。项目的目标是简化WebGL...
Three.js线宽.lineWidth无效
热门推荐
u014291990的博客
06-12 1万+
Three.js线宽.lineWidth无效 在编写Three.js程序的时候，你设置线模型Line对应线材质LineBasicMaterial的线宽属性.lineWidth，可能是无效果。 个人技术博客 .lineWidth属性 关于线材质LineBasicMaterial和虚线材质LineDashedMaterial的线宽属性.lineWidth的介绍可以查看Three.js文档。 .line...
3D空间画线演示(这里使用webgl 所以不能设置线宽)
vily_lei的专栏
09-18 1093
Demo:http://www.artvily.com/sample?sample=lineBase 如果直接用opengl,绘制线更方便,webgl只是使用gles的一些api，而且各个浏览器支持不一样。 如果打开Demo出现错误，请清空缓存再打开，因为我的每个版本有些代码有改动。...
canvas绘图、WebGL、SVG
weixin_30606461的博客
11-22 510
目录 一、Canvas 1.1、创建canvas元素 1.2、画线 1.3、绘制矩形 1.4、绘制圆弧 1.5、绘制图像 1.6、绘制文字 1.7、随机颜色与简单动画 二、WebGL 2.1、HTML5游戏开发 2.2.1、Cocos2D-HTML5 2.2.2、Egret（白鹭引擎） 三、SVG 3.1、SVG Hello Wrol...
用webGL绘制数字
10-31
WebGL是一种基于OpenGL ES规范的JavaScript API，它允许在Web浏览器上创建交互式的3D图形和2D矢量图，包括绘制数字。要使用WebGL绘制数字，你可以通过以下几个步骤： 1. **设置环境**：首先，在HTML中创建一个`<canvas>`元素，并赋予它一个ID以便在JavaScript中引用。 ```html <canvas id="myCanvas" width="400" height="400"></canvas> ``` 2. **获取渲染上下文**：然后，在JavaScript中，使用`getContext('webgl')`方法获取到WebGL上下文。 ```javascript var canvas = document.getElementById('myCanvas'); var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl'); ``` 3. **初始化顶点数据**：创建一个数组来存储数字的几何形状，比如2D线条或像素块，可以用SVG路径字符串或其他方法生成。 ```javascript var vertices = [ // 数字的顶点坐标... ]; ``` 4. **设置着色器**：编写顶点着色器（Vertex Shader）和片段着色器（Fragment Shader），用于定义颜色和形状。 5. **设置缓冲区对象**（Buffer Objects）：将顶点数据上传到GPU，以便后续绘制。 6. **绘制数字**：创建基本的VBO操作（如顶点数组对象VAO、启用顶点属性等），调用`gl.drawArrays()`来实际绘制数字。 7. **纹理映射**：如果你想绘制有纹理的数字，可以加载图像并将其应用于网格。 8. **动画或交互**：如果需要动态效果，可以通过时间循环更新顶点位置或添加交互事件处理。 **相关问题--** 1. WebGL中的着色器是如何工作的？ 2. 如何在WebGL中实现纹理映射？ 3. 如何检测WebGL是否支持并且兼容当前浏览器？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值