目录
相关文章
OpenGL系列之一：OpenGL第一个程序
OpenGL系列之二：绘制三角形
OpenGL系列之三：三角形顶点增加颜色
OpenGL系列之四：绘制四边形
OpenGL系列之五：绘制点和线
OpenGL系列之六：绘制立方体
OpenGL系列之七：纹理贴图
OpenGL系列之八：立方体纹理贴图
OpenGL系列之九：glsl着色器语言
OpenGL系列之十：VAO、VBO、EBO的应用
OpenGL系列之十一：Shader图片转场切换动画
OpenGL系列之十二：Shader燃烧动画
实现效果
代码实现
这里我是用的这个案例改造的：https://www.shadertoy.com/view/tsXBzS
改造完后的片元着色器代码如下：
#version 300 es
//高精度绘制，否则会模糊
precision highp float;
//precision mediump float;
uniform float uValue;
uniform vec2 iResolution;
in vec2 o_uv;
out vec4 fragColor;
vec3 palette(float d){
return mix(vec3(0.2,0.7,0.9),vec3(1.,0.,1.),d);
}
vec2 rotate(vec2 p,float a){
float c = cos(a);
float s = sin(a);
return p*mat2(c,s,-s,c);
}
float map(vec3 p){
for( int i = 0; i<8; ++i){
float t = uValue*0.2;
p.xz =rotate(p.xz,t);
p.xy =rotate(p.xy,t*1.89);
p.xz = abs(p.xz);
p.xz-=.5;
}
return dot(sign(p),p)/5.;
}
vec4 rm (vec3 ro, vec3 rd){
float t = 0.;
vec3 col = vec3(0.);
float d;
for(float i =0.; i<64.; i++){
vec3 p = ro + rd*t;
d = map(p)*.5;
if(d<0.02){
break;
}
if(d>100.){
break;
}
//col+=vec3(0.6,0.8,0.8)/(400.*(d));
col+=palette(length(p)*.1)/(400.*(d));
t+=d;
}
return vec4(col,1./(d*100.));
}
void main()
{
vec2 uv = (o_uv-(iResolution.xy/2.))/iResolution.x;;
vec3 ro = vec3(0.,0.,-50.);
ro.xz = rotate(ro.xz,uValue);
vec3 cf = normalize(-ro);
vec3 cs = normalize(cross(cf,vec3(0.,1.,0.)));
vec3 cu = normalize(cross(cf,cs));
vec3 uuv = ro+cf*3. + uv.x*cs + uv.y*cu;
vec3 rd = normalize(uuv-ro);
vec4 col = rm(ro,rd);
fragColor = col;
}
这里为了实现全屏的效果我调整了坐标系，及部分代码具体代码（主要调整CCRender）如下：
CCRender.h
#ifndef OPENGLDEMO_CCRENDER_H
#define OPENGLDEMO_CCRENDER_H
#include "CCTexture.h"
#include "CCOpenGLShader.h"
#include "CCOpenGLVAO.h"
#include "CCOpenGLBuffer.h"
class CCRender{
public:
CCRender();
~CCRender();
//旋转角度
float m_angle =0.0f;
//变换的值
float u_value = 0.0f;
int screenWidth;//屏幕宽度
int screenHeight;//屏幕高度
glm::vec2 iResolution = glm::vec2( 1,1);
CCTexture ccTexture;
CCOpenGLShader ccOpenGlShader;
CCOpenGLVAO ccVAO;
CCOpenGLBuffer* ccVBO;
CCOpenGLBuffer* ccEBO;
void initGL();
void paintGL();
void resizeGL(int width,int height);
void drawShaderAnim();
void setupRenderingObject();
void release();
};
#endif //OPENGLDEMO_CCRENDER_H
CCRender.cpp
#include "CCRender.h"
CCRender::CCRender() {
ccVBO = new CCOpenGLBuffer(CCOpenGLBuffer::VertexBuffer,CCOpenGLBuffer::StaticDraw);
ccEBO = new CCOpenGLBuffer(CCOpenGLBuffer::IndexBuffer,CCOpenGLBuffer::StaticDraw);
}
CCRender::~CCRender(){
release();
}
/**
* 加载
*/
void CCRender::initGL()
{
//清空颜色
glClearColor(0.0,0,0,1.0);
//清空深度缓存
glClearDepthf(1.0);
//开启深度测试
glEnable(GL_DEPTH_TEST);
//什么情况下使用深度测试
glDepthFunc(GL_LEQUAL);
setupRenderingObject();
}
/**
* 先加载VAO VBO EBO等缓存数据
*/
void CCRender::setupRenderingObject()
{
//顶点数据
const CCFloat5 cubeVertexs[] = {
{ -540,-1045, 1.0 , 0.0, 0.0 },
{ -540, 1045, 1.0 , 0.0, 1.0 },
{ 540, -1045, 1.0 , 1.0, 0.0 },
{ 540, 1045, 1.0 , 1.0, 1.0 },
};
//索引数据
const short cubeIndexs[]= {
0, 1, 2, 2, 1, 3,
};
ccVAO.Create();
ccVAO.Bind();
ccVBO->Create();
ccVBO->Bind();
ccVBO->SetBufferData(cubeVertexs,sizeof(cubeVertexs));
ccEBO->Create();
ccEBO->Bind();
ccEBO->SetBufferData(cubeIndexs,sizeof(cubeIndexs));
//数据的位置
int offset = 0;
ccOpenGlShader.SetAttributeBuffer(0,GL_FLOAT, (void *)offset, 3, sizeof(CCFloat5));
ccOpenGlShader.EnableAttributeArray(0);
//由于数据类型为float，而uv数据的在第四第五的位置，因此需要偏移3个
offset += 3 * sizeof(float);
ccOpenGlShader.SetAttributeBuffer(1,GL_FLOAT, (void *)offset, 2, sizeof(CCFloat5));
ccOpenGlShader.EnableAttributeArray(1);
ccVAO.Release();
ccVBO->Release();
ccEBO->Release();
}
/**
* 绘制
*/
void CCRender::paintGL()
{
//清空颜色缓冲区或深度缓冲区
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
drawShaderAnim();
}
/**
* Shader动画
*/
void CCRender::drawShaderAnim() {
// m_angle += 0.05f;
u_value += 0.05f;
// if(u_value >= 1.0){
// u_value = 1.0;
// }
glm::mat4x4 objectMat;
glm::mat4x4 objectTransMat = glm::translate(glm::mat4(1.0f), glm::vec3(0.0f, 0.0f, -1));
glm::mat4x4 objectRotMat = glm::rotate(glm::mat4(1.0f),m_angle,glm::vec3(1.0f, 1.0f, 1.0) );
glm::mat4x4 objectScaleMat = glm::scale(glm::mat4(1.0f),glm::vec3(1.0f, 1.0f, 0.0) );
// glm::mat4 projMat = glm::perspective(glm::radians(60.0f), (float)9/(float)18, 0.0f, 1000.0f);
float halfWidth = screenWidth / 2.0f;
float halfHeight = screenHeight / 2.0f;
//以当前屏幕宽高设置坐标
glm::mat4 projMat = glm::ortho(-halfWidth, halfWidth, -halfHeight, halfHeight, 0.1f, 100.0f);
objectMat = projMat* objectTransMat * objectScaleMat* objectRotMat ;
ccOpenGlShader.Bind();
ccOpenGlShader.SetUniformValue("u_mat",objectMat);
//设置变化的值
ccOpenGlShader.SetUniformValue("uValue",u_value);
//设置iResolution
ccOpenGlShader.SetUniformValue("iResolution",iResolution);
ccVAO.Bind();
glDrawElements(GL_TRIANGLES,6,GL_UNSIGNED_SHORT,(void *)0);
ccOpenGlShader.Release();
ccVAO.Release();
}
/**
* 窗口大小改变
*/
void CCRender::resizeGL(int width,int height)
{
screenWidth = width;
screenHeight = height;
//设置窗口大小
glViewport(0,0,width,height);
}
/**
* 释放资源
*/
void CCRender::release()
{
glDeleteTextures(6,ccTexture.m_texID);
delete ccVBO;
delete ccEBO;
}
补充说明
这里的片元着色器代码中要使用高精度，否则会模糊，代码如下所示：
//高精度绘制，否则会模糊
precision highp float;
//precision mediump float;
然后是坐标的更改，为了实现全屏显示，我调整了坐标系（下面展示关键代码）：
//顶点数据
const CCFloat5 cubeVertexs[] = {
{ -540,-1045, 1.0 , 0.0, 0.0 },
{ -540, 1045, 1.0 , 0.0, 1.0 },
{ 540, -1045, 1.0 , 1.0, 0.0 },
{ 540, 1045, 1.0 , 1.0, 1.0 },
};
float halfWidth = screenWidth / 2.0f;
float halfHeight = screenHeight / 2.0f;
//以当前屏幕宽高设置坐标
glm::mat4 projMat = glm::ortho(-halfWidth, halfWidth, -halfHeight, halfHeight, 0.1f, 100.0f);
然后是iResolution的值，这个现在我也不太清楚他的规则，这里我传的(1,1)，否则的话显示有偏移
glm::vec2 iResolution = glm::vec2( 1,1);
案例源码
https://gitee.com/itfitness/opengl-shader-gorgeous