学习OpenGL ES之基于CubeMap的反射效果

本文将为大家介绍如何使用CubeMap制作反射效果,反射效果可以让材质具备光滑的质感,比如汽车的烤漆,就非常适合使用反射效果。先上2张效果图。我使用的是Blender内置的猴头模型进行的渲染测试。

学习OpenGL ES之基于CubeMap的反射效果学习OpenGL ES之基于CubeMap的反射效果

Cube Map

我们首先来了解一下什么是CubeMap。即使你不了解CubeMap,但你一定知道全景图。随便打开一个XX地图,进入全景模式,就可以360度无死角的观察周边的环境了。地图的全景模式大多使用的是Cube Map的方式,使用上下左右前后各6张图,分别贴在以观察者为中心的正方体上,这样就可以形成一个假的3D环境了。读者可以从这个网站下载用于CubeMap的图片,下载下来的图片都已经标记好了应该在的位置,使用起来还是很方便的。neg开头的表示在负轴上,pos表示在正轴上。比如posx就是x正轴上的面所使用的贴图。

学习OpenGL ES之基于CubeMap的反射效果

这个网站还可以预览Cube Map的全景效果。点击WebGL Preview即可。
学习OpenGL ES之基于CubeMap的反射效果

在Shader中使用Cube Map

Shader提供了表示CubeMap的内置类型samplerCube,samplerCube和sampler2D一样,都是贴图,不同的是需要使用textureCube进行采样,采样的时候需要传递规范化后的三维向量而不是二维的UV。采样的代码如下。

textureCube(envMap, reflectVec)

textureCube会采样reflectVec向量在Cube Map上指向的点的像素。可以理解为求解向量和标准正方体的相交点。例子中我们根据法向量和视线向量计算用于采样的reflectVec反射向量。然后把采样的颜色用于环境色的计算。

// 计算环境光
vec3 ambient = vec3(light.ambientIndensity) * material.ambientColor;
vec3 reflectVec = normalize(reflect(-eyeVector, transformedNormal));
ambient += 0.5 * diffuseStrength *  textureCube(envMap, reflectVec).rgb;

Shader很简单,只有这部分的变化。

准备Cube Map

接下来我们在OC代码中为Shader准备Cube Map,Cube Map需要6张图,我通过前面说的网站下载了一套Cube Map贴图,按照posx,negx,posy,negy,posz,negz的顺序命名为cube-1,cube-2,….,GLKit生成CubeMap的API需要按照这样顺序将图片传递给它,生成CubeMap的代码如下。

- (void)createCubeTexture {
    NSMutableArray *files = [NSMutableArray new];
    for (int i = 0; i < 6; ++i) {
        NSString *filename = [NSString stringWithFormat:@"cube-%d", i + 1];
        NSString *filePath = [[NSBundle mainBundle] pathForResource:filename ofType:@"jpg"];
        [files addObject:filePath];
    }
    NSError *error;
    self.cubeTexture = [GLKTextureLoader cubeMapWithContentsOfFiles:files options:nil error:&error];
}

将Cube Map传递给Shader

为了将Cube Map传递给Shader,我为GLContext写了一个新的方法。

- (void)bindCubeTexture:(GLKTextureInfo *)textureInfo to:(GLenum)textureChannel uniformName:(NSString *)uniformName {
    glActiveTexture(textureChannel);
    glBindTexture(GL_TEXTURE_CUBE_MAP, textureInfo.name);
    GLuint textureID = (GLuint)textureChannel - (GLuint)GL_TEXTURE0;
    [self setUniform1i:uniformName value:textureID];
}

和2D贴图主要的不同就是绑定到的target不一样,这里绑定到了GL_TEXTURE_CUBE_MAP上,其他的操作和2D贴图都是一样的。最后在渲染时调用这个方法。这里我绑定到了通道3的纹理上。

[obj.context bindCubeTexture:self.cubeTexture to:GL_TEXTURE3 uniformName:@"envMap"];

创建猴头模型

使用之前编写的WavefrontOBJ类可以很方便的加载猴头的模型。

- (void)createMonkey {
    UIImage *normalImage = [UIImage imageNamed:@"metal.jpg"];
    GLKTextureInfo *normalMap = [GLKTextureLoader textureWithCGImage:normalImage.CGImage options:nil error:nil];
    UIImage *diffuseImage = [UIImage imageNamed:@"metal.jpg"];
    GLKTextureInfo *diffuseMap = [GLKTextureLoader textureWithCGImage:diffuseImage.CGImage options:nil error:nil];
    
    NSString *objFile = [[NSBundle mainBundle] pathForResource:@"smoothMonkey" ofType:@"obj"];
    WavefrontOBJ *sphere = [WavefrontOBJ objWithGLContext:self.glContext objFile:objFile diffuseMap:diffuseMap normalMap:normalMap];
    sphere.modelMatrix = GLKMatrix4Identity;
    [self.objects addObject:sphere];
}

到此,基于CubeMap的反射效果就完成了,该技术的重点就是Cube Map,掌握了它,其他都很简单。大家看完可能会发现这种反射效果无法反射周边的几何体,只能反射指定的CubeMap。如果我想制作一面镜子,可以反射周边的物体,该怎么办呢?这就是我下一篇文章将介绍的内容,如何制作实时的镜面反射效果

获取示例代码,本文代码在分支chapter24中。

转自: handyTOOL's Blog

--电子创新网--
粤ICP备12070055号