学习OpenGL ES之激光特效

本系列所有文章目录

获取示例代码

本文主要介绍如何使用2个四边形实现一个简单的激光效果。下面是最终效果图。

#import <GLKit/GLKit.h>

@interface GLContext : NSObject
@property (assign, nonatomic) GLuint program;
+ (id)contextWithVertexShaderPath:(NSString *)vertexShaderPath fragmentShaderPath:(NSString *)fragmentShaderPath;
- (id)initWithVertexShader:(NSString *)vertexShader fragmentShader:(NSString *)fragmentShader;
- (void)active;

/// draw functions
- (void)drawTriangles:(GLfloat *)triangleData vertexCount:(GLint)vertexCount;

/// uniform setters
- (void)setUniform1i:(NSString *)uniformName value:(GLint)value;
- (void)setUniform1f:(NSString *)uniformName value:(GLfloat)value;
- (void)setUniform3fv:(NSString *)uniformName value:(GLKVector3)value;
- (void)setUniformMatrix4fv:(NSString *)uniformName value:(GLKMatrix4)value;

/// texture
- (void)bindTexture:(GLKTextureInfo *)textureInfo to:(GLenum)textureChannel uniformName:(NSString *)uniformName;

@end

这个类可以做以下事情：

1. 编译链接Shader，生成program。
2. 调用active激活GLContext中的program。
3. 使用drawTriangles绘制三角形，后面会增加绘制三角带，线和点等等。
4. setUniformXXX系列方法用来设置各种uniform的值。当然还可以增加更多。
5. bindTexture用来绑定纹理到指定通道。

有了这个类之后，我们可以为不同的Shader建立不同的GLContext，这就意味着我们可以方便的在同一场景使用不同的Shader渲染不同的物体。GLContext的实现代码都是之前已有的代码，比较简单就不详述了。
回到激光特效实现的原理， 开头说到它是由两个四边形组成的，具体的形状如下。

两个四边形垂直相交，然后分别为他们加上一张纹理图。

渲染这两个四边形时，不能够使用前面介绍的光照模型，在Fragment Shader中直接返回纹理色即可，所以我们可以为激光单独创建一个Fragment Shader。

precision highp float;

varying vec2 fragUV;

uniform sampler2D diffuseMap;
uniform float life; // max: 1, min: 0
uniform float hue;

#define Max(a, b) (a > b ? a : b)
#define Min(a, b) (a < b ? a : b)

float hue2rgb(float p, float q, float t) {
    if(t < 0.0) t += 1.0;
    if(t > 1.0) t -= 1.0;
    if(t < 1.0/6.0) return p + (q - p) * 6.0 * t;
    if(t < 1.0/2.0) return q;
    if(t < 2.0/3.0) return p + (q - p) * (2.0/3.0 - t) * 6.0;
    return p;
}

vec3 hslToRgb(float h, float s, float l){
    float r, g, b;
    if(s == 0.0){
        r = g = b = l; // achromatic
    }else{
        float q = l < 0.5 ? l * (1.0 + s) : l + s - l * s;
        float p = 2.0 * l - q;
        r = hue2rgb(p, q, h + 1.0/3.0);
        g = hue2rgb(p, q, h);
        b = hue2rgb(p, q, h - 1.0/3.0);
    }

    return vec3(r, g, b);
}

vec3 rgbToHsl(float r, float g, float b) {
    float max = Max(r, Max(g, b));
    float min = Min(r, Min(g, b));
    float h, s, l = (max + min) / 2.0;

    if(max == min){
        h = s = 0.0; // achromatic
    }else{
        float d = max - min;
        s = l > 0.5 ? d / (2.0 - max - min) : d / (max + min);
        if (max == r) h = (g - b) / d + (g < b ? 6.0 : 0.0);
        if (max == g) h = (b - r) / d + 2.0;
        if (max == b) h = (r - g) / d + 4.0;
        h /= 6.0;
    }

    return vec3(h, s, l);
}

void main(void) {
    float v = (fragUV.y > 0.05 && fragUV.y < 0.95) ? 0.5 : fragUV.y;
    vec4 materialColor = texture2D(diffuseMap, vec2(fragUV.x, v));
    vec3 hsl = rgbToHsl(materialColor.x, materialColor.y, materialColor.z);
    hsl.x = hue;
    vec3 rgb = hslToRgb(hsl.x, hsl.y, hsl.z);
    gl_FragColor = vec4(rgb, materialColor.a * life);
}

看起来很长，因为除了实现读取纹理色之外，还实现了变色，渐隐渐现，防止拉伸过渡等功能。下面我来逐一解释这些功能。

渐隐渐现

该功能主要依靠uniform float life;实现，life的值从0到1。gl_FragColor = vec4(rgb, materialColor.a * life);所以最后相乘等到的颜色也是从全透明到原本的颜色，从而实现了渐隐渐现的效果。

变色

例子中贴图的颜色是蓝色的，为了不做更多颜色的贴图却可以实现不同颜色的激光效果，这里将颜色从RGB空间转换为HSL空间，然后根据uniform float hue;调整HSL的第一个组件值Hue就可以调整颜色了，更多关于HSL的知识可以看百度百科。相关代码如下。

uniform float hue;

#define Max(a, b) (a > b ? a : b)
#define Min(a, b) (a < b ? a : b)

float hue2rgb(float p, float q, float t) {
    if(t < 0.0) t += 1.0;
    if(t > 1.0) t -= 1.0;
    if(t < 1.0/6.0) return p + (q - p) * 6.0 * t;
    if(t < 1.0/2.0) return q;
    if(t < 2.0/3.0) return p + (q - p) * (2.0/3.0 - t) * 6.0;
    return p;
}

vec3 hslToRgb(float h, float s, float l){
    float r, g, b;
    if(s == 0.0){
        r = g = b = l; // achromatic
    }else{
        float q = l < 0.5 ? l * (1.0 + s) : l + s - l * s;
        float p = 2.0 * l - q;
        r = hue2rgb(p, q, h + 1.0/3.0);
        g = hue2rgb(p, q, h);
        b = hue2rgb(p, q, h - 1.0/3.0);
    }

    return vec3(r, g, b);
}

vec3 rgbToHsl(float r, float g, float b) {
    float max = Max(r, Max(g, b));
    float min = Min(r, Min(g, b));
    float h, s, l = (max + min) / 2.0;

    if(max == min){
        h = s = 0.0; // achromatic
    }else{
        float d = max - min;
        s = l > 0.5 ? d / (2.0 - max - min) : d / (max + min);
        if (max == r) h = (g - b) / d + (g < b ? 6.0 : 0.0);
        if (max == g) h = (b - r) / d + 2.0;
        if (max == b) h = (r - g) / d + 4.0;
        h /= 6.0;
    }

    return vec3(h, s, l);
}
void main(void) {
...
    vec3 hsl = rgbToHsl(materialColor.x, materialColor.y, materialColor.z);
    hsl.x = hue;
    vec3 rgb = hslToRgb(hsl.x, hsl.y, hsl.z);
...
}

HSL代表色相(H)、饱和度(S)、明度(L)，其中色相是控制颜色的主要组件。

防止过度拉伸

这行代码主要就是防止贴图在y方向上过度拉伸，对于大于0.05小于0.95的值一律都按照0.5处理，当然也可以为x方向做同样的处理。这个和日常App开发中九宫格的原理是类似的。

float v = (fragUV.y > 0.05 && fragUV.y < 0.95) ? 0.5 : fragUV.y;

以上就是为激光编写的Fragment Shader，至于Vertex Shader，还可以复用原来的。回到OC代码。首先为激光的Shader创建GLContext。

- (void)prepareLaserGLContext {
    NSString *vertexShaderPath = [[NSBundle mainBundle] pathForResource:@"vertex" ofType:@".glsl"];
    NSString *fragmentShaderPath = [[NSBundle mainBundle] pathForResource:@"frg_laser" ofType:@".glsl"];
    self.laserContext = [GLContext contextWithVertexShaderPath:vertexShaderPath fragmentShaderPath:fragmentShaderPath];
}

接着，在绘制代码中就可以使用GLContext的相关方法代替原有的绘制代码了。

- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect {
    [super glkView:view drawInRect:rect];

    [self.laserContext active];
    [self.laserContext setUniform1f:@"elapsedTime" value:(GLfloat)self.elapsedTime];
    [self.laserContext setUniformMatrix4fv:@"projectionMatrix" value:self.projectionMatrix];
    [self.laserContext setUniformMatrix4fv:@"cameraMatrix" value:self.cameraMatrix];

    [self.laserContext setUniform3fv:@"lightDirection" value:self.lightDirection];

    [self.lasers enumerateObjectsUsingBlock:^(Laser *obj, NSUInteger idx, BOOL *stop) {
        [obj draw:self.laserContext];
    }];
}

为了让创建多个激光变得简单，我将激光的相关方法封装到了Laser类中。我们在ViewController中要做的事情就是实例化多个Laser。并且在update中更新他们的状态。

- (void)prepareLasers {
    Laser *laser = [[Laser alloc] initWithLaserImage:[UIImage imageNamed:@"laser.png"]];
    laser.position = GLKVector3Make(0, 0, -40);
    laser.direction = GLKVector3Make(0.08, 0.08, 1);
    laser.length = 60;
    laser.radius = 1;
    [self.lasers addObject:laser];

    laser = [[Laser alloc] initWithLaserImage:[UIImage imageNamed:@"laser.png"]];
    laser.position = GLKVector3Make(0, 0, -40);
    laser.direction = GLKVector3Make(-0.08, -0.08, 1);
    laser.length = 60;
    laser.radius = 1;
    [self.lasers addObject:laser];

    laser = [[Laser alloc] initWithLaserImage:[UIImage imageNamed:@"laser.png"]];
    laser.position = GLKVector3Make(0, 0, -40);
    laser.direction = GLKVector3Make(-0.08, -0.08, 1);
    laser.length = 60;
    laser.radius = 1;
    [self.lasers addObject:laser];

    laser = [[Laser alloc] initWithLaserImage:[UIImage imageNamed:@"laser.png"]];
    laser.position = GLKVector3Make(0, 0, -40);
    laser.direction = GLKVector3Make(-0.08, -0.08, 1);
    laser.length = 60;
    laser.radius = 1;
    [self.lasers addObject:laser];
}

- (void)update {
    [super update];
    [self.lasers enumerateObjectsUsingBlock:^(Laser *obj, NSUInteger idx, BOOL *stop) {
        [obj update:self.timeSinceLastUpdate];
    }];
}

最后我们来看看Laser类中的具体实现。

#import <GLKit/GLKit.h>

@class GLContext;

@interface Laser : NSObject
@property (assign, nonatomic) GLfloat life;
@property (assign, nonatomic) GLKVector3 position;
@property (assign, nonatomic) GLKVector3 direction;
@property (assign, nonatomic) float length;
@property (assign, nonatomic) float radius;

- (id)initWithLaserImage:(UIImage *)image;
- (void)update:(NSTimeInterval)timeSinceLastUpdate;
- (void)draw:(GLContext *)glContext;
@end

life就是之前提到的控制渐隐渐现的参数，position表示激光发射的位置，direction表示激光发射的方向，length是长度，radius是直径。初始化的时候将纹理图片传入即可。

在update中计算对应的modelMatrix。

- (void)update:(NSTimeInterval)timeSinceLastUpdate {
    self.life -= timeSinceLastUpdate;
    if (self.life <= 0) {
        self.life = 1;
        float x = rand() / (float)RAND_MAX * 0.1 - 0.05;
        float y = rand() / (float)RAND_MAX * 0.1 - 0.05;
        self.direction = GLKVector3Normalize(GLKVector3Make(x, y, 1));
        self.hue = rand() / (float)RAND_MAX * 1.0;
    }

    GLKVector3 defaultForward = GLKVector3Make(0, 0, 1);
    GLKVector3 rotateAxis = GLKVector3CrossProduct(defaultForward, self.direction);
    float cosAngle = GLKVector3DotProduct(defaultForward, self.direction);
    float angle = acos(cosAngle);

    GLKMatrix4 scaleMatrix = GLKMatrix4MakeScale(self.length, self.radius, self.radius);
    GLKMatrix4 rotateToZMatrix = GLKMatrix4MakeRotation(M_PI / 2, 0, 1, 0);
    GLKMatrix4 translateMatrix = GLKMatrix4MakeTranslation(0, 0, self.length / 2);
    GLKMatrix4 rotateMatrix = GLKMatrix4MakeRotation(angle, rotateAxis.x, rotateAxis.y, rotateAxis.z);
    GLKMatrix4 positionTranslateMatrix = GLKMatrix4MakeTranslation(self.position.x, self.position.y, self.position.z);
    self.modelMatrix = GLKMatrix4Multiply(rotateToZMatrix, scaleMatrix);
    self.modelMatrix = GLKMatrix4Multiply(translateMatrix, self.modelMatrix);
    self.modelMatrix = GLKMatrix4Multiply(rotateMatrix, self.modelMatrix);
    self.modelMatrix = GLKMatrix4Multiply(positionTranslateMatrix, self.modelMatrix);
}

上面的代码在每一次life小于等于0时，重置激光方向和色相Hue。计算modelMatrix的步骤如下：

1. 根据方向计算旋转轴和旋转角。
2. 计算缩放矩阵scaleMatrix将激光缩放到长self.length，直径self.radius。
3. 因为默认较长的方向是x轴，所以再计算旋转到z轴的旋转矩阵rotateToZMatrix。
4. 旋转到z轴后，将一端移至(0,0,0)点，计算出translateMatrix。
5. 在根据刚开始计算的旋转角和旋转轴计算旋转矩阵rotateMatrix。
6. 最后计算将激光移至self.position的矩阵positionTranslateMatrix。

将上述矩阵相乘即可得到modelMatrix，注意是从下往上乘。

具体的绘制代码如下。life和hue都在- (void)draw:(GLContext *)glContext里传递给了Shader。- (void)drawLaser:(GLContext *)glContext中绘制了两个垂直平面，并且在绘制过程中禁用了DepthMask。

- (void)draw:(GLContext *)glContext {
    [glContext setUniformMatrix4fv:@"modelMatrix" value:self.modelMatrix];
    bool canInvert;
    GLKMatrix4 normalMatrix = GLKMatrix4InvertAndTranspose(self.modelMatrix, &canInvert);
    [glContext setUniformMatrix4fv:@"normalMatrix" value:canInvert ? normalMatrix : GLKMatrix4Identity];

    [glContext setUniform1f:@"life" value:self.life];
    [glContext bindTexture:self.diffuseTexture to:GL_TEXTURE0 uniformName:@"diffuseMap"];
    [glContext setUniform1f:@"hue" value:self.hue];

    [self drawLaser: glContext];
}

- (void)drawLaser:(GLContext *)glContext{
    glDepthMask(GL_FALSE);

    static GLfloat plane1[] = {
        -0.5, 0.5f, 0, 1, 0, 0,     1, 0, // x, y, z, r, g, b,每一行存储一个点的信息，位置和颜色
        -0.5f, -0.5f, 0, 0, 1, 0,   0, 0,
        0.5f, -0.5f, 0, 0, 0, 1,    0, 1,
        0.5, -0.5f, 0, 0, 0, 1,     0, 1,
        0.5f, 0.5f, 0, 0, 1, 0,     1, 1,
        -0.5f, 0.5f, 0, 1, 0, 0,    1, 0,
    };
    [glContext drawTriangles:plane1 vertexCount:6];
    
    static GLfloat plane2[] = {
        -0.5,0, 0.5f,  1, 0, 0,     1, 0, // x, y, z, r, g, b,每一行存储一个点的信息，位置和颜色
        -0.5f,0, -0.5f,  0, 1, 0,   0, 0,
        0.5f, 0, -0.5f, 0, 0, 1,    0, 1,
        0.5,0, -0.5f,  0, 0, 1,     0, 1,
        0.5f, 0, 0.5f, 0, 1, 0,     1, 1,
        -0.5f, 0,0.5f,  1, 0, 0,    1, 0,
    };
    [glContext drawTriangles:plane2 vertexCount:6];

    glDepthMask(GL_TRUE);
}

本文的例子中使用的BlendFunc是glBlendFunc (GL_SRC_ALPHA, GL_DST_ALPHA);，这种混合方式可以让激光显得更明亮一些。

到此，激光的效果就介绍完了，这个效果涉及到了之前大部分的知识，算是一个阶段性总结了吧。