WebGL自学笔记第一天

最新推荐文章于 2022-08-13 18:05:02 发布

梦近在咫尺

最新推荐文章于 2022-08-13 18:05:02 发布

阅读量177

点赞数

分类专栏：游戏技术文章标签： opengl webgl

本文链接：https://blog.csdn.net/dreamchou/article/details/108400992

版权

游戏技术专栏收录该内容

5 篇文章 0 订阅

订阅专栏

WebGL初识

免费、开放的OpenGL代替微软的Direct3D
专门用于嵌入式、智能手机、游戏机这一类的OpenGL ES:
1. 衍生于OpenGL
2. 是OpenGL的子类移除许多无用的旧特性
WebGL是在OpenGL ES2.0基础上衍生而来的
OpenGL2.0引入了可编程着色器方法(programmable shader functions)，该特性也被OpenGL ES 2.0继承，而这成为WebGL 1.0 标准的核心部分。
书外扩展：目前的为WebGL 2.0版本，基于OpenGL ES 3.0，引入了许多扩展，大部分浏览器已经支持，ios预计今年(2020年)会支持。

WebGL入门

canvas标签(画布)

HTML5引入
WebGL可以在上面绘制三维图形
绘制二维图形的步骤
1. 获取元素
2. 向该元素请求二维图形的“绘图上下文”
3. 在绘图上下文上调用相应的绘图函数，以绘制二维图形。
代码演示
h5代码推荐各位使用HBuilderX智能提示比较齐全，写代码舒服极了~

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Dra a blue rectangle (canvas version)</title>
	</head>
	<!-- 指定body加载完后的入口 -->
	<body onload="main()">
		<!-- 定义一个canvas -->
		<canvas id="example" width="400" height="400">
			Please user a browser that supports "canvas"
		</canvas>
		<!-- 加载一个js文件 -->
		<script src="DrawRectangle.js"></script>
	</body>
</html>

function main(){
	// 找到canvas元素，很像cc.find啊
	var canvas = document.getElementById('example')
	if(!canvas) {
		return;
	}
	// 绘制2d
	var ctx = canvas.getContext('2d');
	// 这里给canvas加入颜色，canvas本身是透明的，跟CCC的canvas还是有点不一样
	// 这里的透明度是0到1.0之间，网上有说0-255的注意下
	ctx.fillStyle = 'rgba(0, 0, 255, 1)';
	// 填充区域 原点在左上角 与cocos坐标系区分
	ctx.fillRect(120, 10, 150, 150);
}

根据上述理论，编写代码后，效果如下
运行效果

WebGL程序

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Clear cnavas</title>
	</head>
	<body onload="main()">
		<canvas id="webgl" width="400" height="400">
			Please user the browser supporting "canvas"
		</canvas>
		<script src="../lib/webgl-utils.js"></script>
		<script src="../lib/webgl-debug.js"></script>
		<script src="../lib/cuon-utils.js"></script>
		<script src="HelloCanvas.js"></script>
	</body>
</html>

 function main(){
	 var canvas = document.getElementById('webgl');
	 var gl = getWebGLContext(canvas);
	 if(!gl) {
		 console.log('Failed to get the rendering context for WebGL');
		 return;
	 }
	 // 设置背景色
	 // 除非下一次调用clearColor，否则背景色会一直常驻WebGL系统
	 gl.clearColor(0.0, 0.0, 0.0, 1.0);
	 // 清空绘图区【实际是清空颜色缓冲区】 
	 // 清除方式就是用上面的背景色擦除已经绘制的内容
	 // gl.COLOR_BUFFER_BIT 指定颜色缓存
	 // gl.DEPTH_BUFFER_BIT 指定深度缓冲区
	 // gl.STENCIL_BUFFER_BIT 指定模板缓冲区
	 gl.clear(gl.COLOR_BUFFER_BIT);
 }

相关demo可以在我的公众号【xyzzlky】中回复【WebGL】获取

梦近在咫尺

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebGL自学笔记第一天

WebGL初识免费、开放的OpenGL代替微软的Direct3D专门用于嵌入式、智能手机、游戏机这一类的OpenGL ES:衍生于OpenGL是OpenGL的子类移除许多无用的旧特性WebGL是在OpenGL ES2.0基础上衍生而来的OpenGL2.0引入了可编程着色器方法(programmable shader functions)，该特性也被OpenGL ES 2.0继承，而这成为WebGL 1.0 标准的核心部分。书外扩展：目前的为WebGL 2.0版本，基于OpenGL E
复制链接

扫一扫

专栏目录