WebGl 画线
效果:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebGl 画线</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="300" style='border:1px solid red'></canvas>
</body> <script> window.onload = function () { //获取上下文
var canvas = document.getElementById('myCanvas');
var gl = canvas.getContext('webgl'); //定义线段数组
var vertices = [
-0.7,-0.1,0,
-0.3,0.6,0,
-0.3,-0.3,0,
0.2,0.6,0,
0.3,-0.3,0,
0.7,0.6,0
] var vertex_buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,vertex_buffer);
gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(vertices), gl.STATIC_DRAW); //着色器程序
var vertCode =
"attribute vec3 coordinates;" +
"void main() {" +
"gl_Position = vec4(coordinates,1.0);" + //位置
"}";
var fragCode =
"void main() {" +
"gl_FragColor = vec4(1, 0.5, 0.0, 1);" + //RBGA值
"}"; var vertShader = gl.createShader(gl.VERTEX_SHADER);
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(vertShader,vertCode);
gl.shaderSource(fragShader,fragCode);
gl.compileShader(vertShader);
gl.compileShader(fragShader); var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram,vertShader);
gl.attachShader(shaderProgram,fragShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram); //关联着色器程序到缓冲对象
var coord = gl.getAttribLocation(shaderProgram,'coordinates');
gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(coord); //画线
gl.clearColor(0.5, 0.5, 0.5, 0.9);
gl.enable(gl.DEPTH_TEST);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.viewport(0,0,myCanvas.width,myCanvas.height);
gl.drawArrays(gl.LINES, 0, 6); } </script> </html>
WebGl 画线的更多相关文章
- MFC画线功能总结
本文仅用于学习交流,商业用途请支持正版!转载请注明:http://www.cnblogs.com/mxbs/p/6216464.html MFC画线功能要点有二:其一,鼠标按下时记录初始位置为线的起始 ...
- MFC消息映射机制以及画线功能实现
---此仅供用于学习交流,切勿用于商业用途,转载请注明http://www.cnblogs.com/mxbs/p/6213404.html. 利用VS2010创建一个单文档标准MFC工程,工程名为Dr ...
- CGContextRef 画线简单用法
CGContextRef CGContextMoveToPoint(context,150,50);//圆弧的起始点 CGContextAddArcToPoint(context,100,80,130 ...
- Android中Path类的lineTo方法和quadTo方法画线的区别
转载:http://blog.csdn.net/stevenhu_223/article/details/9229337 当我们需要在屏幕上形成画线时,Path类的应用是必不可少的,而Path类的li ...
- C#使用 DirectX SDK 9做视频播放器 并在视频画线添加文字 VMR9
视频图像处理系列 索引 VS2013下测试通过. 在百度中搜索关键字“DirectX SDk”,或者进入微软官网https://www.microsoft.com/en-us/download/det ...
- iOS小画板画线总结
一:基本画线: 使用贝赛尔曲线画: //创建路径 UIBezierPath* aPath = [UIBezierPath bezierPath]; //设置线宽 aPath.lineWidth = 5 ...
- [修复] Firemonkey 画线问题(Android & iOS 平台)
问题:官方 QC 的一个 Firemonkey 移动平台画线问题: RSP-14309: [iOS & Android] Delphi 10.1 Berlin - drawing proble ...
- WPF画线问题,几千条以后就有明显的延迟了。
我现在是这么画的,class A { private GeometryGroup _lines; private Path _path; public A() { _path.Data = ...
- ios cocos2d 画线出现闪烁问题
根据http://www.merowing.info/2012/04/drawing-smooth-lines-with-cocos2d-ios-inspired-by-paper/ 用cocos2d ...
随机推荐
- LinkedList源码疑问记录
早上看linkedList源码时候,对于它的初始化一直不太明白.如下: transient int size = 0; /** * Pointer to first node. * Invariant ...
- C#中的基础数据类型
一.C#有15个预定义类型,13个值类型,两个引用类型(string和object): 1.整型 int a=15; short a=15; 2.浮点类型 float a=12.9; double a ...
- 几种常见的Windows 服务器无法联网/无法连接远程桌面等故障解决方案
SEO优化扫我一.服务器无法连接远程桌面 1.Ping不通IP,网站打不开,不可以远程连接.可能是服务器死机了,或者网络有问题,请尝试Web重启服务器或联系服务商确认. 2.Ping正常,网站可以打开 ...
- Azure 经典模式中虚拟机证书指纹的生成和作用
用户在使用经典虚拟机时,经常会有如下疑问:门户主板页面中的 SSH/RDP 证书指纹这项信息是怎么来的?用途是什么?为什么有的时候为空?有没有对虚拟机使用有什么影响?以下我们进行一些基本的介绍: 证书 ...
- Java学习---InetAddress类的学习
基础知识 1.InetAddress类 在网络API套接字,InetAddress类和它的子类型对象使用域名DNS系统,处理主机名到主机IPv4或IPv6地址的转换.如图1-1所示. 由于InetAd ...
- aclocal: error: aclocal: file '/usr/local/share/aclocal/wxwin.m4' does not exist
1. 查找wxwin.m4文件 mdfind -name wxwin.m4 2. 删除/usr/local/share/aclocal/wxwin.m4,建立软连接 cd /usr/local/sha ...
- Windows平台下Android应用抓包挖掘漏洞方法
0x01 大体思路 在安卓75%的市场占有率下,形形色色的安卓应用层出不穷,随之而来的便是大波的漏洞.在各类市场中随意翻一下,几乎都是连接网络的应用,这在给用户惬意体验的同时也给我们漏洞挖掘带来了机会 ...
- Hadoop Spark 基础教程
0x01 Hadoop 慕课网 https://www.imooc.com/learn/391 Hadoop基础 慕课网 https://www.imooc.com/learn/890 Hadoop ...
- java多线程--实现Runnable接口方式
因为java类只能继承一个类可以实现多个接口的特性,所以一般情况下不推荐使用继承Thread类实现多线程,下面是实现Runnable接口方式的简单多线程代码 package text; /** * 多 ...
- (七)Linux下的关机与重启命令
============================================================================================= 关机与重启命 ...