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

本文介绍了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>符串

			//编译两段代码ÿ
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值