[IG]WebGL三角形绘制

最新推荐文章于 2021-07-18 00:31:00 发布

是土豆大叔啊！

最新推荐文章于 2021-07-18 00:31:00 发布

阅读量130

点赞数

分类专栏：计算机视觉CV 文章标签： javascript js html webgl

本文链接：https://blog.csdn.net/potato_uncle/article/details/114002673

版权

计算机视觉CV 专栏收录该内容

26 篇文章 3 订阅

订阅专栏

该代码源于Interactive Computer Graphics
Edward Angel and Dave Shreiner
Eighth Edition, Pearson Education, 2020

为更好理解此代码，仅添加部分注释

在这里插入图片描述

HTML文件

<html>

<!--在 HTML 页面中插入一段 JavaScript, 必需的 type 属性规定脚本的 MIME 类型, -->
<!--vertex-shader顶点着色器 -->
<!--#version 300 es 表示 OpenGL着色语言, 确定其版本-->
<!--
		aPosition指变量名称，它所保存的是顶点的位置信息//
		vec4是GLSL中的一种数据类型，在这里表示GLSL的四维浮点数向量，默认值为(0,0,0,1)，表示(x,y,z,w)。当有字段缺失时，会填充对应的默认值。//
		in字段的话，表示设置这个变量，即aPosition为着色器阶段的输入变量，指定了数据进入着色器的流向，在这里代表数据从外部流入。//
-->
<script id="vertex-shader" type="x-shader/x-vertex">

	#version 300 es

	in vec4 aPosition;

	void main()
	{
	gl_Position = aPosition;
	}
</script>


<!--fragment-shader片元着色器
	precision精度限定符，定义一个变量的最小的存储要求，mediump中等要求，float浮点变量
	out表示定义一个输出变量，类型为vec4，变量名为fColor
	fColor = vec4( 1.0, 1.0, 0.0, 1.0 );表示输出颜色 控制三角形颜色

-->
<script id="fragment-shader" type="x-shader/x-fragment">
	#version 300 es

	precision mediump float;

	out vec4  fColor;

	void main()
	{

	fColor = vec4( 1.0, 1.0, 0.0, 1.0 );
	}
</script>

<!--script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。-->
<script type="text/javascript" src="../Common/initShaders.js"></script>
<script type="text/javascript" src="triangle.js"></script>

<!--定义画布长宽-->
<canvas id="gl-canvas" width="512" height="512"> </canvas>

</html>

JS文件

//"use strict" 的目的是指定代码在严格条件下执行。严格模式下不能使用未声明的变量。
"use strict";

//var 语句用于声明变量。
var gl;
var points;

//代码要从已运行后的网页获取元素
window.onload = function init()
{
    // 方法可返回对拥有指定 ID 的第一个对象的引用。
    var canvas = document.getElementById( "gl-canvas" ); //gl-canvas对应html中的画布id

    //getContext() 方法返回一个用于在画布上绘图的环境
    gl = canvas.getContext('webgl2');  //“webgl2”这将创建一个 WebGL2RenderingContext 三维渲染上下文对象。只在实现 WebGL 版本2 (OpenGL ES 3.0)的浏览器上可用。

    //alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。
    if (!gl) { alert( "WebGL 2.0 isn't available" ); }

    //
    //  Initialize our data for a single triangle
    //

    // First, initialize the  three points.

    //new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。
    //Float32Array 类型数组代表的是平台字节顺序为32位的浮点数型数组
     points = new Float32Array([
         -1, -1 ,
          0,  1 ,
          1, -1
        ]);

    //
    //  Configure WebGL
    //
    gl.viewport( 0, 0, canvas.width, canvas.height );  //重新改变画布canvas大小,此处就是获取在html中设定的画布大小
    gl.clearColor( 1, 0.5, 0.5, 3 );  //设定颜色.粉色。全为1.0表示白色

    //  Load shaders and initialize attribute buffers

    //initShaders()函数的作用是，编译GLSL ES代码，创建和初始化着色器供WebGL使用
    var program = initShaders( gl, "vertex-shader", "fragment-shader" );
    gl.useProgram( program );  //将定义好的WebGLProgram 对象添加到当前的渲染状态中。

    // Load the data into the GPU

    var bufferId = gl.createBuffer();  //创建并初始化一个用于储存顶点数据或着色数据的WebGLBuffer对象
    gl.bindBuffer( gl.ARRAY_BUFFER, bufferId );  //将给定的WebGLBuffer绑定到目标 gl.ARRAY_BUFFER 包含顶点属性的Buffer，如顶点坐标，纹理坐标数据或顶点颜色数据。
    gl.bufferData( gl.ARRAY_BUFFER, points, gl.STATIC_DRAW );  //创建并初始化了Buffer对象的数据存储区

    // Associate out shader variables with our data buffer

    var aPosition = gl.getAttribLocation( program, "aPosition" );  //返回了给定WebGLProgram对象中某属性的下标指向位置。
    gl.vertexAttribPointer( aPosition, 2, gl.FLOAT, false, 0, 0 );  //绑定当前缓冲区范围到gl.ARRAY_BUFFER,成为当前顶点缓冲区对象的通用顶点属性并指定它的布局(缓冲区对象中的偏移量)。
    gl.enableVertexAttribArray( aPosition );  //可以打开属性数组列表中指定索引处的通用顶点属性数组。


    render();  //开始渲染
};


function render() {
    gl.clear( gl.COLOR_BUFFER_BIT );  //clear使用预设值来清空缓冲， COLOR_BUFFER_BIT颜色缓冲区
    gl.drawArrays( gl.TRIANGLES, 0, 3 );  //drawArrays用于从向量数组中绘制图元， gl.TRIANGLES，绘制一系列三角形。每三个点作为顶点
}

是土豆大叔啊！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
[IG]WebGL三角形绘制

<html><script id="vertex-shader" type="x-shader/x-vertex">  #version 300 es <!-- aPosition指变量名称，它所保..
复制链接

扫一扫