html5 WebGL 学习随笔(1)

最新推荐文章于 2025-05-14 16:43:37 发布

原创最新推荐文章于 2025-05-14 16:43:37 发布 · 601 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了在页面DOM加载完成后初始化WEBGL的方法，并通过实例展示了如何加载着色器，包括创建、提供源码、编译等关键步骤。

一般思路是：

1. 在页面DOM加载完成时，初始化WEBGL

例如：document.onload = initWGL();

var canvas = docment.getElementById('canvas');
var gl = canvas.getContext("experimental-webgl");

2. 加载着色器

例如：

	var source = "着色器代码";
	// 创建着色器, FRAGMENT_SHADER（片段着色器） 和VERTEX_SHADER （顶点着色器）
	var shader = gl.createShader(gl.FRAGMENT_SHADER);

	// 为着色器提供源码
	gl.shaderSource(shader, source);
	// 编译着色器
	gl.compileShader(shader);
	
	// 看是否编译成功
	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
		alert("编译着色器代码出错: " + gl.getShaderInfoLog(shader));
		return null;
	}

3. 初始化程序对象