一个纯纯的WegGL小例子

最新推荐文章于 2023-07-21 15:17:23 发布

尤尤

最新推荐文章于 2023-07-21 15:17:23 发布

阅读量221

点赞数

分类专栏： webgl 文章标签： javascript webgl ViewUI

本文链接：https://blog.csdn.net/wanlic2008/article/details/84855281

版权

webgl 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>一个纯纯的WegGL小例子</title>
</head>
<body>
	<canvas id="myCanvas" width="600" height="450"></canvas>
	<script>
		var canvas = document.getElementById('myCanvas');
		var gl = canvas.getContext('webgl');

		var vertCode = ''
			+ 'void main() {\n'
			+ ' gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n'
			+ ' gl_PointSize = 10.0;\n'
			+ '}\n';

		var vertShader = gl.createShader(gl.VERTEX_SHADER);
		gl.shaderSource(vertShader, vertCode);
		gl.compileShader(vertShader);

		var fragCode = ''
			+ 'void main() {\n'
			+ ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n'
			+ '}\n';
		var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
		gl.shaderSource(fragShader, fragCode);
		gl.compileShader(fragShader);

		var shaderProgram = gl.createProgram();
		gl.attachShader(shaderProgram, vertShader);
		gl.attachShader(shaderProgram, fragShader);
		gl.linkProgram(shaderProgram);
		gl.useProgram(shaderProgram);

		gl.clearColor(0.0, 0.0, 0.0, 1.0);
		gl.clear(gl.COLOR_BUFFER_BIT);

		gl.drawArrays(gl.POINTS, 0, 1);

	</script>
</body>
</html>