AI 助理
备案控制台
开发者社区 云计算 文章 正文

学习OpenGL ES之激光特效

2022-09-18 213
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 学习OpenGL ES之激光特效

获取示例代码

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

1.gif

在了解激光实现原理之前，先介绍一下我对上一篇文章的代码进行的简单重构。我把OpenGL关键性的代码都集成到了GLContext类中。

#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的实现代码都是之前已有的代码，比较简单就不详述了。
回到激光特效实现的原理， 开头说到它是由两个四边形组成的，具体的形状如下。

image.png

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

渲染这两个四边形时，不能够使用前面介绍的光照模型，在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);，这种混合方式可以让激光显得更明亮一些。

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

关键词：
opengl学习
opengl es
学习opengl
学习opengl es
1612300339067507
目录
相关文章
游客zn7mvnkypuy76
|
6月前
|
编解码 算法 程序员
老程序员分享：OpenGL学习进程（10）第七课：四边形绘制与动画基础
老程序员分享：OpenGL学习进程（10）第七课：四边形绘制与动画基础
游客zn7mvnkypuy76
107 0
热烈的马
|
7月前
|
XML 小程序 Java
【Android App】三维投影OpenGL ES的讲解及着色器实现（附源码和演示 超详细）
【Android App】三维投影OpenGL ES的讲解及着色器实现（附源码和演示 超详细）
热烈的马
145 0
二进制怪兽
|
C语言 开发者
[笔记]音视频学习之OpenGL篇《一》创建窗口
[笔记]音视频学习之OpenGL篇《一》创建窗口
二进制怪兽
67 0
turbolove
|
存储 编解码 编译器
QT+ OpenGL学习
什么是opengl open graphics library 他是一个由Khronos组织制定并且维护的规范 opengl核心是一个c库，同时也支持多种语言的派生
turbolove
177 0
求索君
|
存储 编解码 算法
Opengl ES之LUT滤镜(上)
Opengl ES之连载系列
求索君
472 0
求索君
|
数据安全/隐私保护 开发者
OpenGL ES 多目标渲染（MRT）
Opengl ES连载系列
求索君
332 0
求索君
|
数据安全/隐私保护 索引
Opengl ES之纹理数组
Opengl ES连载系列
求索君
265 0
求索君
|
数据安全/隐私保护
Opengl ES之水印贴图
Opengl ES之连载系列
求索君
158 0
求索君
|
Java 数据安全/隐私保护 Android开发
Opengl ES之矩阵变换(下)
Opengl ES连载系列
求索君
139 0
求索君
|
Java API 数据安全/隐私保护
Opengl ES之矩阵变换(上)
Opengl ES连载系列
求索君
154 0

热门文章

最新文章

  • 1
    拍立淘---试妆魔镜 OpenGL ES 2.0 框架及性能优化
  • 2
    OpenGL ES 正反面设置指令
  • 3
    Android官方开发文档Training系列课程中文版：OpenGL绘图之添加动态效果
  • 4
    opengl 教程(5) shader(2) uniform变量
  • 5
    《基于MFC的OpenGL编程》Part 15 Selection
  • 6
    关于 OpenGL GLU 的相关介绍和资源链接
  • 7
    NeHe的OpenGL教程5（Bang翻译Delphi版）-如何绘制立方体
  • 8
    OpenGL ES 背面消隐特性在 iOS 设备与模拟器上的运行效果细微差异
  • 9
    JAVA智能设备基于OpenGL的3D开发技术 之AABB碰撞检测算法论述
  • 10
    《基于MFC的OpenGL编程》Part 16 Reflection
  • 1
    除了 OpenGL，还有哪些常用的图形库可以在 C 语言中使用？
    616
  • 2
    Nvidia GeForce GTX 1650不支持OpenGL4.6
    120
  • 3
    当WPF遇见OpenGL：一场关于如何在Windows Presentation Foundation中融入高性能跨平台图形处理技术的精彩碰撞——详解集成步骤与实战代码示例
    343
  • 4
    关于linux的qt发布（linuxdeployqt）中opengl版本过高的解决
    48
  • 5
    老程序员分享：OpenGL学习进程（10）第七课：四边形绘制与动画基础
    107
  • 6
    OpenGL生态中的GL, GLU, GLUT, GLX, GLEW, GLEE和GLEXT详解
    370
  • 7
    【计算机图形学】 OpenGL环境配置
    95
  • 8
    C++与OpenGL结合实现的屏幕监控软件：高性能屏幕录制解决方案
    302
  • 9
    Android开发之使用OpenGL实现翻书动画
    171
  • 10
    Android开发之OpenGL的画笔工具GL10
    92

    • 相关电子书

    更多
  • 360°全景视频播放器的实现原理
  • 3D动画的菜谱式灯光与云渲染
  • 低代码开发师（初级）实战教程
    • 下一篇
    DataWorks售前咨询