我在这里找到了这个茶壶的一个很好的例子......
https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/sdk/demos/google/shiny-teapot/index.html
通过查看源代码,我找到了我正在寻找的内容:
function loadCubeMap(base, suffix) {
var texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
var faces = [["posx.png", gl.TEXTURE_CUBE_MAP_POSITIVE_X],
["negx.png", gl.TEXTURE_CUBE_MAP_NEGATIVE_X],
["posy.png", gl.TEXTURE_CUBE_MAP_POSITIVE_Y],
["negy.png", gl.TEXTURE_CUBE_MAP_NEGATIVE_Y],
["posz.png", gl.TEXTURE_CUBE_MAP_POSITIVE_Z],
["negz.png", gl.TEXTURE_CUBE_MAP_NEGATIVE_Z]];
for (var i = 0; i < faces.length; i++) {
var face = faces[i][1];
var image = new Image();
image.onload = function(texture, face, image) {
return function() {
gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
gl.texImage2D(face, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
}
} (texture, face, image);
image.src = faces[i][0];
}
return texture;
}
...和示例片段着色器(它比我需要的环境反射映射更多)...
precision mediump float;
const float bumpHeight = 0.2;
uniform sampler2D normalSampler;
uniform samplerCube envSampler;
varying vec2 texCoord;
varying vec3 worldEyeVec;
varying vec3 worldNormal;
varying vec3 worldTangent;
varying vec3 worldBinorm;
void main() {
vec2 bump = (texture2D(normalSampler texCoord.xy).xy * 2.0 - 1.0) * bumpHeight;
vec3 normal = normalize(worldNormal);
vec3 tangent = normalize(worldTangent);
vec3 binormal = normalize(worldBinorm);
vec3 nb = normal + bump.x * tangent + bump.y * binormal;
nb = normalize(nb);
vec3 worldEye = normalize(worldEyeVec);
vec3 lookup = reflect(worldEye nb);
vec4 color = textureCube(envSampler, lookup); // <--- this was the aha! line
gl_FragColor = color;
}
结果出来有点酷……
请随时在http://hristo.oskov.com/projects/cs418/mp3/上查看。源代码都在那里......代码很烂所以请不要评判我:) 这是主要的 JS 文件:http ://hristo.oskov.com/projects/cs418/mp3/js/mp3 .js。着色器位于 index.html 页面中,因此只需查看源代码。