二、WebGL入门，基本开发流程

最新推荐文章于 2024-09-26 07:30:18 发布

a23366192007

最新推荐文章于 2024-09-26 07:30:18 发布

阅读量2.6k

点赞数 2

分类专栏： WebGL 自学文章标签： webgl

本文链接：https://blog.csdn.net/a23366192007/article/details/50532069

版权

本文介绍了WebGL的基础，它源自OpenGLES2.0，采用可编程管线技术，通过GLSL语言与显卡直接交互。通过绘制三角形展示了WebGL的开发流程，包括编译着色器、传输顶点数据到显卡、运行程序及绘制。重点讲解了顶点着色器和片段着色器的概念，并提供了简单的GLSL代码示例。

摘要由CSDN通过智能技术生成

WebGL的标准来自于OpenGLES2.0,而OpenGLES2.0来自于纯可编程管线技术，有别与以前OpenGL的固定管线技术，可编程管线技术更加灵活，效率更高，但是对开发人员的要求更高。比如：以前光照只需要调几个函数就行，现在则需要写比较底层的东西，如怎么反射，怎么折射等等。本节通过绘制一个三角形来介绍下WebGL的基本开发流程。

废话不多说先上代码：

<html>
<head>
	<title>webgl-lesson2</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">

	<script id="shader-vs" > //顶点着色器vertexShader，处理顶点
		attribute vec3 v3Position;
		void main(void)
		{
			gl_Position = vec4(v3Position,1.0);
		}
	</script>

	<script id="shader-fs" >//片段着色器fragmentShader，填充颜色
		void main(void)
		{
			gl_FragColor = vec4(1.0,1.0,1.0,1.0);
		}//两段shader代码都在显卡在执行
	</script>
	<script type="text/javascript">

		function getShaderSource(scritptID)
		{
			var shaderScript = document.getElementById(scritptID);
			if(shaderScript == null) return "";

			var sourceCode = "";
			var child = shaderScript.firstChild;
			while(child)
			{
				if(child.nodeType == child.TEXT_NODE) sourceCode+=child.textContent;
				child = child.nextSibling;
			}
			return sourceCode;
		}

		var webgl = null;
		var vertexShaderObject = null;
		var fragmentShaderObject = null;
		var programObject = null;
		var triangleBuffer = null;
		var v3PositionIndex = 0;

		function Init()
		{
			var canvas = document.getElementById("myCanvas");
			webgl = canvas.getContext("webgl");
			webgl.viewport(0,0,canvas.clientWidth,canvas.clientHeight);


			vertexShaderObject = webgl.createShader(webgl.VERTEX_SHADER);//创建一个空的vertexShader对象，里面什么也没有
			fragmentShaderObject = webgl.createShader(webgl.FRAGMENT_SHADER);//同理创建一个空的fragmentShader对象

			webgl.shaderSource(vertexShaderObject,getShaderSource("shader-vs"));//相当于给vertexShader赋值，使其指向shader-vs里面的代码字符串
			webgl.shaderSource(fragmentShaderObject,getShaderSource("shader-fs"));//相当于给fragmentShader赋值，使其指向shader-fs里面的代码字<span style="white-space:pre">												</span>符串

			//编译两段代码ÿ