关于WebGL绘制线原理不明白的小伙伴,可以看看我之前的文章WebGL绘制有宽度的线。这一篇我们主要来介绍端头的绘制,先看效果图。

  端头一般被称为lineCap,主要有以下三种形式:

  butt最简单等于没有端头,square一般是多出lineWidth/2的长度,round是一个以lineWidth/2为半径的圆。一般情况下绘制lineCap的思路都是添加额外的三角形,如一些开元库或者mapbox的方法,一般来说mapbox的方法已经可以了,但是我还是感觉顶点太多,甚至对square的情况都不愿意在增加两个顶点。

  方法总是自己去探索的,在绘制宽度线中,我已经总结了自己的一套理论,将线距离映射成uv坐标的思路来绘制一些线的效果,那么在这里仍然沿着这种思路去思考。

  对于square来说只要在绘制顶点的时候,在线的开头和结尾分别做一定的偏移即可。对于round我们可以在suqare的基础上,在片元着色器中做一些判断,距离中心点距离大于lineWidth/2的像素全部抛弃掉。

  

  所以对于线起点和终点处顶点的位置在上一篇文章的基础上,做了沿着线方向的偏移

 

  这样的话我们就能绘制出square类型的lineCap。但是对于round仅仅这样做还不行,还需要在片元着色器中根据中心点做一次剔除。那么问题来了,经过偏移后如何知道圆心点的位置,在来根据像素距离来进行剔除。这时候就轮到上篇文章利用纹理坐标来表示线长度的思路了,上一篇中我们把路线长度映射成从0-1的uv坐标,那么对于端头来说,我们可以把超出的那一半线宽的像素映射成纹理坐标,可以想象这部分长度对于起点来说等于负的线长度,对应的纹理坐标就是负的纹理坐标;对于终点来说多出的这部分像素等于增加了的线长度,那么对应纹理坐标就是超过1的部分。那么接下来的问题就是如何把线上的像素长度对应于线的长度等于把像素与3d世界中的单位进行映射。

  如果对投影矩阵不是很了解的同学,最好看看我的这篇文章webgl开发第一道坎——矩阵与坐标变换,这里我们需要用到投影矩阵的中的元素

  resolution.x代表canvas显示元素的宽度,这里恐怕有些地方不太好理解。n其实是代表相机的近平面,我们先假设为1;那么pixelWidthRatio表示像素与3d单位的一个比值的一半。后面我们先暂时也假设finalPosition.w的值也为一,那么最终vPixelWidth的值表示每像素代表多少3d单位。但是由于视锥体的投影变换并不是线性的,所以这样得到的vPixelWidth并不适用视锥体中的所有地方。这时候我们回来看pixelWidthRatio有一个分母n代表近平面,finalPosition.w代表投影后的点距离相机坐标中的z值距离。w/n这里是想用线性来补充一部分非线性变换带来的影响,让vPixelWidth表示每像素代表多少3d单位这个结果尽量的准确。实际效果也确实可以达到预期。

 

  现在我们可以将端头多出的一半线宽的像素距离转化成线的距离,同时在转化成纹理单位。

 

  接下来我们可以在片元着色器中进行剔除工作。这里我们需要做几步工作:

  1. 纹理坐标转换成线的距离长度
  2. 线的距离长度转换成像素单位
  3. 对大于lineWidth/2长度的像素进行剔除
 

  这里我们需要用到varying变量对vPixelWidth进行差值。最终我们绘制出round的lineCap效果。

WebGL绘制有端头的线的更多相关文章

  1. WebGL绘制有宽度的线

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

  2. WebGL 绘制Line的bug(一)

    今天说点跟WebGL相关的事儿,不知道大家有没有碰到过类似的烦恼. 熟悉WebGL的同学都知道,WebGL绘制模式有点.线.面三种:通过点的绘制可以实现粒子系统等,通过线可以绘制一些连线关系:面就强大 ...

  3. WebGL 绘制Line的bug(二)

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

  4. iOS: 如何正确的绘制1像素的线

    iOS 绘制1像素的线 一.Point Vs Pixel iOS中当我们使用Quartz,UIKit,CoreAnimation等框架时,所有的坐标系统采用Point来衡量.系统在实际渲染到设置时会帮 ...

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

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

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

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

  7. iOS 绘制1像素的线

    一.Point Vs Pixel iOS中当我们使用Quartz,UIKit,CoreAnimation等框架时,所有的坐标系统采用Point来衡量.系统在实际渲染到设置时会帮助我们处理Point到P ...

  8. 用 Excel 测试“绘制两点间连线”的算法

    最近在研究和制作数字示波器,其中涉及一个小算法:需要将 ADC 采样的数值在 TFT LCD 屏幕上面显示并且用“线”连接起来. ADC 按照时序对输入电压采样后,记录的是一个个的数值,如果显示的时候 ...

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

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

随机推荐

  1. SSM-SpringMVC-28:SpringMVC类型转换之自定义日期类型转换器

     ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 例子很简易,要明白的是思路,话不多说,开讲 上篇博客不是说springmvc默认的日期转换格式是yyyy/M ...

  2. RabbitMQ 入门【精+转】

    rabbitmq可以用一本书取讲,这里只是介绍一些使用过程中,常用到的基本的知识点.官方文档覆盖的内容,非常全面:http://www.rabbitmq.com/documentation.html  ...

  3. 修改WordPress后台默认登陆地址提高网站安全性

    作者:荒原之梦 原文链接:http://zhaokaifeng.com/?p=536 安装完WordPress后,默认的登陆地址就是: http://XXX.XXX/wordpress/wp-admi ...

  4. ORA-12737: Instant Client Light: unsupported server character set CHS16GBK

    当使用Navicat Premiun 英文版连接oracl时可能会报ORA-12737: Instant Client Light: unsupported server character set ...

  5. CSDN Android客户端的制作 导航帖

    弄个导航贴,把相关知识来个汇总. CSDN Android的客户端的效果图: 分别通过以下博客进行详细的讲解: 1.Android 使用Fragment,ViewPagerIndicator 制作cs ...

  6. 玩转spring MVC(七)----拦截器

    继续在前边的基础上来学习spring MVC中拦截器的使用,下面通过一个例子来实现(完整项目在这里下载:http://download.csdn.net/detail/u012116457/84334 ...

  7. 那些年我们一起清除过的浮动float与clearfix

    浮动(float),一个我们即爱又恨的属性.爱,因为通过浮动,我们能很方便地布局: 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器). ...

  8. 他学习一年Python找不到工作,大佬都说你别再学Python了!

    引言: 都说,滴水穿石非一日之功.然而有些人即使奋斗一辈子也比不上别人一年,别人学习一年比不得你学习一个月.其中缘由,有些人看了大半辈子还没看明白. 即使Python这么火,为何你学习一年的Pytho ...

  9. docker开机自动重启参数

    docker run -ti -d --privileged --restart=always -p : -p : -v /apps/qkaoauth:/apps/qkaoauth docker.qk ...

  10. 一步一步理解 python web 框架,才不会从入门到放弃 -- 开始使用 Django

    背景知识 要使用 Django,首先必须先安装 Django. 下图是 Django 官网的版本支持,我们可以看到上面有一个 LTS 存在.什么是 LTS 呢?LTS ,long-term suppo ...