上篇提到過關於貼圖的兩個限制： 1、跨域安全限制 跟AJAX之類差不多，但是沒有測試根目錄下具有安全配置文件（一些xml）的情況。當然，不出意外，本地瀏覽(file協議)調用相對路徑圖片也是不可以的。所以，連測試只能在一個web平臺下進行。 2、圖片格式問題 MDN上有個提示： https://de ...
上篇提到過關於貼圖的兩個限制：
1、跨域安全限制
跟AJAX之類差不多，但是沒有測試根目錄下具有安全配置文件（一些xml）的情況。當然，不出意外，本地瀏覽(file協議)調用相對路徑圖片也是不可以的。所以，連測試只能在一個web平臺下進行。
2、圖片格式問題
MDN上有個提示：
https://developer.mozilla.org/en/WebGL/Using_textures_in_WebGL
Note: Textures' widths and heights must be a power of two number of pixels (that is, 1, 2, 4, 8, 16, etc).
我理解為：圖片的寬度和高度只能為2^n(n=0|自然數)，單位為像素(px)。但限制還遠不止此。測試通過的圖片格式情況：
- GIF，8位顏色
- PNG，32/64位顏色
- BMP，32位顏色
JPG格式不知什麼原因，竟然沒有通過；需要註意，顏色位數似乎也應該是2^n，24位也未通過；然而雖然8位的gif可以使用，但是8位的png卻不能。tag/tiff不支持。PNG透明不支持，GIF的透明支持。
上圖是MDN例子里的原圖，請下載後看屬性里的詳細信息。
MDN關於貼圖的例子：https://developer.mozilla.org/samples/webgl/sample6/index.html
本例做了較大的修改，並增加了燈光效果。註意，原例中沒有燈光變化。
我們首先修改Shader
<script id="shader-vs" type="x-shader/x-vertex">
attribute highp vec3 aVertexNormal;
attribute highp vec3 aVertexPosition;
attribute highp vec2 aTextureCoord;
uniform highp mat4 uNormalMatrix;
uniform highp mat4 uMVMatrix;
uniform highp mat4 uPMatrix;
varying highp vec2 vTextureCoord;
varying highp vec3 vLighting;
void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
vTextureCoord = aTextureCoord.st;
highp vec3 ambientLight = vec3(0.6, 0.6, 0.6);
highp vec3 directionalLightColor = vec3(0.5, 0.5, 0.75);
highp vec3 directionalVector = vec3(0.85, 0.8, 0.75);
highp vec4 transformedNormal = uNormalMatrix * vec4(aVertexNormal, 1.0);
highp float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0);
vLighting = ambientLight + (directionalLightColor * directional);
}
</script>
<script id="shader-fs" type="x-shader/x-fragment">
varying highp vec2 vTextureCoord;
varying highp vec3 vLighting;
uniform sampler2D uSampler;
void main(void) {
highp vec2 texCoord = vec2(vTextureCoord.s, vTextureCoord.t);
highp vec4 color = texture2D(uSampler, texCoord);
gl_FragColor = vec4(color.rgb * vLighting, color.a);
}
</script>
一些代碼：
var igl = new iWebGL('glcanvas', 0);
/* 立方體頂點和三角面頂點索引順序 */
var vs = CubeVertices();
igl.paramVertices('aVertexPosition').define(vs.data);
igl.paramVerticesIndex().define(vs.indices);
/* 頂點貼圖數據 */
igl.paramVertices('aVertexNormal').define([
// Front
0.0, 0.0, 1.0,
0.0, 0.0, 1.0,
0.0, 0.0, 1.0,
0.0, 0.0, 1.0,
// Back
0.0, 0.0, -1.0,
0.0, 0.0, -1.0,
0.0, 0.0, -1.0,
0.0, 0.0, -1.0,
// Top
0.0, 1.0, 0.0,
0.0, 1.0, 0.0,
0.0, 1.0, 0.0,
0.0, 1.0, 0.0,
// Bottom
0.0, -1.0, 0.0,
0.0, -1.0, 0.0,
0.0, -1.0, 0.0,
0.0, -1.0, 0.0,
// Right
1.0, 0.0, 0.0,
1.0, 0.0, 0.0,
1.0, 0.0, 0.0,
1.0, 0.0, 0.0,
// Left
-1.0, 0.0, 0.0,
-1.0, 0.0, 0.0,
-1.0, 0.0, 0.0,
-1.0, 0.0, 0.0
]);
igl.paramTexture('aTextureCoord').define([
// Front
0.0, 0.0,
1.0, 0.0,
1.0, 1.0,
0.0, 1.0,
// Back
0.0, 0.0,
1.0, 0.0,
1.0, 1.0,
0.0, 1.0,
// Top
0.0, 0.0,
1.0, 0.0,
1.0, 1.0,
0.0, 1.0,
// Bottom
0.0, 0.0,
1.0, 0.0,
1.0, 1.0,
0.0, 1.0,
// Right
0.0, 0.0,
1.0, 0.0,
1.0, 1.0,
0.0, 1.0,
// Left
0.0, 0.0,
1.0, 0.0,
1.0, 1.0,
0.0, 1.0
]);
/* 調用貼圖 */
igl.loadTexture2('ff32.png');
/* 設置場景 */
igl.matrix.trans([0.0, 0.0, -5.0]);
igl.matrix.make(40, 640 / 480, 0.1, 100.0);
var animate = function(){
igl.matrix.rotate(1, [1, 0, 1]);
igl.drawCube();;
}
/* 動畫效果 */
setInterval(animate, 40);
我覺得效果還不錯的。
Ops…忘了鏈接：
