学习日志1

超级详细的图形学js文件的注释

/**
 * kang
 * 2021/10/8
 */
"use strict";
//定义两个变量
var gl;
var points;
//init函数
//window.onload() 方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。
//window.onload() 通常用于 <body> 元素，在页面完全载入后(包括图片、css文件等等)执行脚本代码。
window.onload = function init() {
	//使用document.getElementById来获取html中特定id1的canvas画布
	var canvas = document.getElementById("triangle-canvas");
	//WebGLUtils.setupWebGL()这个函数返回一个WebGL上下文对象，该对象包含了所有的WebGL函数及参数
	//可以通过"gl."来调用
	gl = WebGLUtils.setupWebGL(canvas);
	console.log(gl);
	//这里用来进一步验证是够获取到WebGL的各种信息
	if (!gl) {
		alert("WebGL isn't available");
	}
	//坐标/点，每两个为一组
	var vertices = [
		-1.0, -1.0,
		0.0, 1.0,
		1.0, -1.0,
	];

	//用来设置视口，即指定从标准设备到窗口坐标的x、y仿射变换。
	//x用来设定视口的左下角水平坐标。默认值：0。
	//y用来设定视口的左下角垂直坐标。默认值：0。
	//width(非负数)用来设定视口的宽度。默认值：canvas的宽度。
	//height(非负数)用来设定视口的高度。默认值：canvas的高度
	gl.viewport(0, 0, canvas.width, canvas.height);
	//用于设置清空颜色缓冲时的颜色值。
	gl.clearColor(0.0, 1.0, 1.0, 1.0);
	//这一部分作用时在GPU上创建一个顶点缓存区对象buffer，之后将数据放入其中
	//Vertex Buffer Obbject    /    VBO
	var buffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, buffer);			//gl.ARRAY_BUFFER表示缓冲区中的数据时顶点属性数据，而不是数据的索引
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); //将数据存放到VBO中
	//
	//这里记录一下为什么要这样写
	//摘抄自课本61页
	//初始化代码、创建几何信息的代码以及绘制代码都用javaScript编写，而着色器却是用GLSL编写的程序
	//为了得到可执行的模块，必须将这些代码连接起来，还过程涉及的步骤有：从文件中把源代码读入到着色器中，
	//编译每个独立的部分，以及把所有的部分库连接起来。
	//以下为第一个步骤：创建程序对象，并使用程序对象并保存着色器和两个着色器对象
	var program = initShaders(gl, "vertex-shader", "fragment-shader");
	gl.useProgram(program);

	//将着色器连接到程序对象的过程中会产生一个表，着色器中的变量名会与表中得到索引相关联。
	//gl.getAttribLocation函数返回着色器中的属性变量的索引（列如我们编写的顶点着色器中的顶点位置属性vPosition）
	//得到索引后，我们需要做两件事
	var vPosition = gl.getAttribLocation(program, "vPosition");
	//1、使用gl.vertexAttribPointer函数描述定点数组中的数据形式
	//参数说明：
		//1：索引 2，3：说明pointsArray数组的每个元素都包含两个浮点数 4：说明不需要将数据归一化至（0.0， 1.0）这个范围
		//5：说明数组中的值是连续的
		//6：说明缓冲区中数据的起始位置
	gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
	//2、使用enableVertexAttribArray函数开启着色器中的顶点属性
	gl.enableVertexAttribArray(vPosition);

	render();
}

function render() {
	//使用预设值来清空缓冲
	//这里的COLOR_BUFFER_BIT正好对应上面的37行
	gl.clear(gl.COLOR_BUFFER_BIT);
	//drawArrays()方法用于从向量数组中绘制图元。
	//语法 void gl.drawArrays(mode, first, count);
	//参数
	//mode:GLenum (en-US) 类型，指定绘制图元的方式，可能值如下。
	////gl.POINTS: 绘制一系列点。
	////gl.LINE_STRIP: 绘制一个线条。 即， 绘制一系列线段， 上一点连接下一点。
	////gl.LINE_LOOP: 绘制一个线圈。 即， 绘制一系列线段， 上一点连接下一点， 并且最后一点与第一个点相连。
	////gl.LINES: 绘制一系列单独线段。 每两个点作为端点， 线段之间不连接。
	////gl.TRIANGLE_STRIP： 绘制一个三角带。
	////gl.TRIANGLE_FAN： 绘制一个三角扇。
	////gl.TRIANGLES: 绘制一系列三角形。 每三个点作为顶点。
	//first:GLint(en - US) 类型， 指定从哪个点开始绘制。
	//count:GLsizei(en - US) 类型， 指定绘制需要使用到多少个点。
	// gl.drawArrays(gl.POINTS, 0, 3);
	// gl.drawArrays(gl.LINE_STRIP, 0, 3);
	// gl.drawArrays(gl.LINE_LOOP, 0, 3);
	// gl.drawArrays(gl.LINES, 0, 4);
	// gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
	// gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
	gl.drawArrays(gl.TRIANGLES, 0, 3);
}

If you like this blog or find it useful for you, you are welcome to comment on it. You are also welcome to share this blog, so that more people can participate in it. If the images used in the blog infringe your copyright, please contact the author to delete them. Thank you !

超级详细的图形学js文件的注释

FEATURED TAGS

FRIENDS