WebGL---6.3D纹理贴图

土豆丝的逆袭

于 2018-10-10 18:29:15 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： opengl

本文链接：https://blog.youkuaiyun.com/wade333777/article/details/83001459

本文介绍WebGL中如何实现3D纹理贴图，通过实例代码和效果展示来详细讲解这一技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、实例代码

<html>
	<canvas id='c' width='640' height='480'></canvas>
	<script type="x-shader/x-vertex" id="vertex-shader">
	  	attribute vec4 a_position;
	  	attribute vec2 aTextureCoord;
	  	uniform mat4 model;
	  	uniform mat4 view;
	  	uniform mat4 projection;

	  	varying highp vec2 vTextureCoord;

	  	void main(){
	  		gl_Position = projection * view * model * a_position;
      		vTextureCoord = aTextureCoord;
	  	}
	</script>
	<script type="x-shader/x-fragment" id="fragment-shader">
		varying highp vec2 vTextureCoord;
		uniform sampler2D uSampler;

	  	void main(){
	  		gl_FragColor = texture2D(uSampler, vTextureCoord);
	  	}
	</script>
	<script src="WebGLUtils.js"> </script>
	<script src="gl-matrix.js"></script>

	<script>
		var rotation = 0.0
		var gl = createGLContext('c')

		// alert(gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS))

		//创建shader program
		var program = createPr