webgl1不支持设置线段宽度,这就只好通过shader来实现了,参考了踏得网的例子,引用地址:http://wow.techbrood.com/fiddle/43140。先在此感谢踏得网创始人之一 Ryan.chen 陈晓峰。介绍一下踏得网,这是一个推广交流webgl的网站,同学们可以去学习交流。由于本文代码完全抄用踏得网的例子,所以本文不是案例原创,但本文会将对借鉴代码的理解详细分析。

  我们先贴出shader着色器代码,来看一下。

<script id="vertex" type="x-shader">
attribute vec2 aVertexPosition; void main() {
gl_Position = vec4(aVertexPosition, 0.0, 1.0);
}
</script> <script id="fragment" type="x-shader">
#ifdef GL_ES
precision highp float;
#endif uniform vec4 uColor; void main() {
gl_FragColor = uColor;
}
</script>

首先我们来分析一下顶点着色器vertex,只有一个attribute参数,是vec2类型的参数 aVertexPosition,线段的两个顶点坐标。接下来看片段着色器fragment,也只有一个参数,uniform参数,参数类型vec4,是传入的线段颜色参数。顶点着色器的主函数只是将gl_Position设置为线段的顶点坐标,片段着色器的主函数也仅仅是将gl_FragColor设置成参数传入的线段颜色。就是说线段上每一个position的顶点像素的颜色都是参数传入的线段颜色。
  接下来我们来看js代码。

<script type="text/javascript">
function init(){
canvas = document.getElementById("mycanvas");
gl = canvas.getContext("experimental-webgl"); gl.viewport(0, 0, canvas.width, canvas.height);
gl.clearColor(0, 0.5, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT); var v = document.getElementById("vertex").firstChild.nodeValue;
var f = document.getElementById("fragment").firstChild.nodeValue; var vs = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vs, v);
gl.compileShader(vs); var fs = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fs, f);
gl.compileShader(fs); program = gl.createProgram();
gl.attachShader(program, vs);
gl.attachShader(program, fs);
gl.linkProgram(program); if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS))
console.log(gl.getShaderInfoLog(vs)); if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS))
console.log(gl.getShaderInfoLog(fs)); if (!gl.getProgramParameter(program, gl.LINK_STATUS))
console.log(gl.getProgramInfoLog(program)); var aspect = canvas.width / canvas.height; var vertices = new Float32Array([
-0.5, 0.1*aspect, 0.5, 0.1*aspect, 0.5,0.11*aspect,
-0.5, 0.1*aspect, 0.5, 0.11*aspect, -0.5,0.11*aspect
]); vbuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); itemSize = 2;
numItems = vertices.length / itemSize; gl.useProgram(program); program.uColor = gl.getUniformLocation(program, "uColor");
gl.uniform4fv(program.uColor, [1.0, 1.0, 0.0, 1.0]); program.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition");
gl.enableVertexAttribArray(program.aVertexPosition);
gl.vertexAttribPointer(program.aVertexPosition, itemSize, gl.FLOAT, false, 0, 0); gl.drawArrays(gl.TRIANGLES, 0, numItems);
}
</script>

我们看到,线段的顶点是vertices,其中有6组顶点,线段的颜色是黄色,就是这段代码

program.uColor = gl.getUniformLocation(program, "uColor");
gl.uniform4fv(program.uColor, [1.0, 1.0, 0.0, 1.0]);

我们可以看一下结果,如下图

我们看到,这条线段是2D的矩形,并不是3D意义上的粗线段,还有一种思路,可以画一个圆柱代替线段。

  以上就是踏得网的粗线段的例子。

webgl绘制粗线段的更多相关文章

  1. WebGL 绘制Line的bug(二)

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

  2. Canvas绘制圆点线段

    最近一个小伙遇到一个需求,客户需要绘制圆点样式的线条. 大致效果是这样的: 思路一:计算并使用arc填充 他自己实现了一种思路,然后咨询我有没有更好的思路. 先看看他的思路是如何实现的,大致代码如下: ...

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

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

  4. canvas学习总结三:绘制路径-线段

    Canvas绘图环境中有些属于立即绘制图形方法,有些绘图方法是基于路径的. 立即绘制图形方法仅有两个strokeRect(),fillRect(),虽然strokezText(),fillText() ...

  5. WebGL绘制有端头的线

    关于WebGL绘制线原理不明白的小伙伴,可以看看我之前的文章WebGL绘制有宽度的线.这一篇我们主要来介绍端头的绘制,先看效果图. 端头一般被称为lineCap,主要有以下三种形式: butt最简单等 ...

  6. WebGL绘制有宽度的线

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

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

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

  8. 使用ImageMagick 在图片上绘制粗斜体的中文也许是一个错误。

    测试发现: ImageMagick使用中文字体,在图片上绘制带粗或斜体的中文,看不到效果. 如果使用英文字体,绘制粗或斜体的英文,99%都有效果. 今天无意看到一篇文章提到: convert -lis ...

  9. WebGL 绘制Line的bug(一)

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

随机推荐

  1. Windows10自动更新之后,无线有线都连不上网

    大概浪费了我至少6个小时. 一个是无线网卡,这个后来可以修复,其实也不是网卡的原因.最主要的原因是 Realtek PCIe GBE Family Controller  这个驱动.只找到一个win1 ...

  2. DevExpress01、独立使用的控件

    XtraEditors 库提供了只能独立使用的控件,也就是说不能在容器控件的内置编辑中使用它们. 这些控件包括: 几种类型的列表框.数据导航控件.滚动条和一个按钮控件. 这些控件都是 BaseStyl ...

  3. Linux新建用户没有设置密码

    只要你能登陆root账户就行 登陆root账户 输入  echo "密码“ | passwd --stdin 用户名

  4. JS传递函数并且调用

    封装的函数: function getDataByJsonP(methName, inData, fn) { // 这里fn可以直接传入函数名字 $.ajax({ url: '', //请求的url地 ...

  5. 洛谷 P1251 餐巾计划问题(线性规划网络优化)【费用流】

    (题外话:心塞...大部分时间都在debug,拆点忘记加N,总边数算错,数据类型标错,字母写错......) 题目链接:https://www.luogu.org/problemnew/show/P1 ...

  6. 2743: [HEOI2012]采花

    Description 萧芸斓是Z国的公主,平时的一大爱好是采花.今天天气晴朗,阳光明媚,公主清晨便去了皇宫中新建的花园采花 .花园足够大,容纳了n朵花,花有c种颜色(用整数1-c表示),且花是排成一 ...

  7. luogu【模板】三维偏序(陌上花开)

    嘟嘟嘟 很显然我开始学\(CDQ\)分治了. 我刚开始学的时候看了一篇博客,上面全是一些抽象的概念,看完后真是一头雾水,最后还不得不抄了这题的代码. 但这样可不行呀-- 于是我就不打算再扣那篇博客,而 ...

  8. git +maven+java+jenkins自动化代码持续集成

    1.安装JDK JDK下载: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 新 ...

  9. Jmeter之集合点与关联

    在Jmeter中,实现类似于LoadRunner中集合点的方法是采用同步定时器(Synchronizing Timer),而实现类似于LoadRunner中关联的方法是采用正则表达式提取器. 一.集合 ...

  10. 在windows上安装不同(两个)版本的Mysql数据库

    1.起因: 需要导入一个sql文件,发现死活导不进去.当执行到这一句时,就有问题.经过一番搜索,原来是我的数据库版本(原先Mysql版本5.5)低了,而支持该语句的版本应该是至少要5.7.那我索性就去 ...