[英]How do I simulate “overflow: hidden” in three.js or WebGL?
[英]how would I do environment reflection in webgl without using a library like three.js?
我正在尝试弄清楚如何将环境映射到 object。这是设置:
我怎样才能让茶壶的表面反映出它周围的环境? 所以我的意思是,茶壶不是那种灰色阴影,它的表面应该反映它的环境,所以它应该将棋盘映射到它的表面上。
这是我想要完成的示例,但它使用Three.js ,我想自己完成(这是一个班级)。
http://aerotwist.com/tutorials/create-your-own-environment-maps/demo/
这有意义吗? 我将如何开始?
我在完成作业后回答了这个问题: https://stackoverflow.com/a/10093646/196921 。 请参阅链接和代码的答案:)
我在这里找到了这个茶壶的一个很好的例子......
通过查看源代码,我找到了我要找的东西:
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 页面中,因此只需查看源代码即可。
渲染反射 object 的基本方法是:
(我自己从来没有真正做过这个,但我看过 这样的教程)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.