webgl之绘制一个矩形

功能：使用webgl绘制一个矩形,这里通过绘制两个三角形来实现一个矩形的绘制

步骤：

1	获取webgl上下文
2	获取着色器字符串
3	创建，加载，编译着色器
4	给着色器的变量赋值
5	绘制图形

第一步：获取webgl上下文

        // 获取WebGL上下文var canvas = document.getElementById("canvas");var gl = canvas.getContext("webgl");if (!gl) {return;}// 告诉WebGL怎样把提供的gl_Position裁剪空间坐标对应到画布像素坐标（屏幕空间）gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);// 清空画布gl.clearColor(0, 0, 0, 1);gl.clear(gl.COLOR_BUFFER_BIT);

第二步：创建着色器字符串

这里几个注意事项：a_position.xy 其实是获取一个vec2的向量

vec2 zeroToOne = a_position.xy / u_resolution; 这里是vec2/vec2。我理解他的结果应该如下：

假设vec2 a1（x1,y1） a2（x2,y2） a3 = a1/a2 =(x1/x2,y1/y2)

其他的理解应该不难

<!-- vertex shader -->
<script id="2d-vertex-shader" type="notjs">attribute vec4 a_position;uniform vec2 u_resolution;void main() {// 从像素坐标转换到 0.0 到 1.0vec2 zeroToOne = a_position.xy / u_resolution;// 再把 0->1 转换 0->2vec2 zeroToTwo = zeroToOne * 2.0;// 把 0->2 转换到 -1->+1 (裁剪空间)vec2 clipSpace = zeroToTwo - 1.0;gl_Position = vec4(clipSpace, 0, 1);}</script>
<!-- fragment shader -->
<script id="2d-fragment-shader" type="notjs">precision mediump float;void main() {gl_FragColor = vec4(1, 0, 0.5, 1); // return redish-purple}
</script>

获取着色器字符串

        var vertexShaderSource = document.getElementById("2d-vertex-shader").text;var fragmentShaderSource = document.getElementById("2d-fragment-shader").text;

第三步：创建，加载，编译着色器

    // 创建着色器方法，输入参数：渲染上下文，着色器类型，数据源function createShader(gl, type, source) {var shader = gl.createShader(type);// 创建着色器对象gl.shaderSource(shader, source);// 提供数据源gl.compileShader(shader);// 编译 -> 生成着色器var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);if (success) {return shader;}console.log(gl.getShaderInfoLog(shader));gl.deleteShader(shader);}// 然后我们将这两个着色器 link（链接）到一个 program（着色程序）function createProgram(gl, vertexShader, fragmentShader) {var program = gl.createProgram();//创建着色程序gl.attachShader(program, vertexShader);// 附加顶点着色器gl.attachShader(program, fragmentShader);// 附加片元着色器gl.linkProgram(program);//链接到着色程序var success = gl.getProgramParameter(program, gl.LINK_STATUS);//判断着色程序是否创建成功if (success) {gl.useProgram(program);return program;}console.log(gl.getProgramInfoLog(program));gl.deleteProgram(program);}

创建定点着色器和片元着色器，再创建程序

        var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);var program = createProgram(gl, vertexShader, fragmentShader);

第四步：给变量赋值

        // 创建存放三个2维裁剪空间点的缓存var positionBuffer = gl.createBuffer();// 绑定位置信息缓冲（下面的绑定点就是ARRAY_BUFFER）gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);var positions = new Float32Array([100, 200,200, 200,100, 30,100, 30,200, 200,200, 30,]);gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);// 从着色程序中找到a_position属性值所在的位置var positionAttributeLocation = gl.getAttribLocation(program, "a_position");// 从着色程序中找到u_resolution属性值所在的位置var resolutionUniformLocation = gl.getUniformLocation(program, "u_resolution");// 启用对应属性gl.enableVertexAttribArray(positionAttributeLocation);// 告诉属性怎么从positionBuffer中读取数据 (ARRAY_BUFFER)var size = 2;          // 每次迭代运行提取两个单位数据var type = gl.FLOAT;   // 每个单位的数据类型是32位浮点型var normalize = false; // 不需要归一化数据var stride = positions.BYTES_PER_ELEMENT * 2;        // 0 = 移动单位数量 * 每个单位占用内存（sizeof(type)）每次迭代运行运动多少内存到下一个数据开始点var offset = 0;        // 从缓冲起始位置开始读取gl.vertexAttribPointer(positionAttributeLocation, size, type, normalize, stride, offset);// 设置全局变量 分辨率gl.uniform2f(resolutionUniformLocation, gl.canvas.width, gl.canvas.height);

第五步：绘制图像

        // 绘制var primitiveType = gl.TRIANGLES;var offset = 0;var count = 6;gl.drawArrays(primitiveType, offset, count);

看一下效果：

我们可以调整一下坐标，就会发现是两个三角形了。

把坐标调整一下：

        var positions = new Float32Array([100, 200,200, 200,100, 30,100, 30,200, 200,200, 100,]);

就会变成下面的图了：

webgl之绘制一个矩形相关推荐

绘制矩形php,PHP_php绘制一个矩形的方法，本文实例讲述了php绘制一个矩 - phpStudy...
php绘制一个矩形的方法本文实例讲述了php绘制一个矩形的方法.分享给大家供大家参考.具体实现方法如下: //1.创建画布 $im = imagecreatetruecolor(300,200);/ ...
绘制矩形php,php绘制一个矩形的方法
本文实例讲述了php绘制一个矩形的方法.分享给大家供大家参考.具体实现方法如下: //1.创建画布 $im = imagecreatetruecolor(300,200);//新建一个真彩色图像,默认 ...
html页面画一个矩形,使用HTML5 canvas绘制一个矩形的方法
使用HTML5 canvas绘制一个矩形的方法发布时间:2020-08-29 11:23:12 来源:亿速云阅读:102 作者:小新这篇文章将为大家详细讲解有关使用HTML5 canvas绘制一 ...
在canvas(画布）上绘制一个矩形盒子并使用按键移动这个盒子
思路 1.在画布上创建一个2d画笔,并用这个画笔在画布上绘制一个矩形. 2.设置一个边界判断使这个盒子不能移出画布之外,只能在画布中移动. 注意: 不能直接在style中设置canvas的大小直接设 ...
【webgl】绘制一个三角形
[webgl]绘制一个三角形文章同时发布于:王鹏飞的个人网站. 作为webgl的第一篇文章,首先我推荐几个学习webgl(opengl)的资源: learnopengl中文官网:https://le ...
android canvas drawrect画图,为什么在android中调用canvas.drawRect时只绘制一个矩形？
我正在尝试使用foreach循环为ArrayList中的每个字符串绘制一个矩形,但它似乎只绘制了最后一个矩形. 我看过类似的问题,但他们遇到的问题包括矩形底部高于顶部并调用drawPaint - 但我 ...
php 画矩形然后合并,php绘制一个矩形的方法
php绘制一个矩形的方法本文实例讲述了php绘制一个矩形的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: //1.创建画布 $im = imagecreatetruecolor ...
cesium借助折线的两个端点绘制一个矩形--vue2.0版本 --按照经纬线横纵排列
1. 使用流程演示 2.vue页面源码 // 绘制矩形对角线方式 drawRectangle11() {this.$message({type: "success",messag ...
Android中使用画笔和画布绘制一个矩形
场景在Android中画笔使用Paint类,画布使用Canvas类来表示. 绘图的基本步骤首先编写一个继承自View的自定义View类,然后重写其onDraw方法,最后把自定义的view添加到ac ...

webgl之绘制一个矩形

webgl之绘制一个矩形相关推荐

最新文章

热门文章