OpenGL ES 2.0 ——一张胶片的纹理渲染之旅

前面的博客没有过多的涉及代码，这篇博客就聊聊渲染纹理，怎么使用OpenGL ES2.0 的API使用 和 步骤。

纹理图片

相机：哈苏500cm

胶片：Kodak Ektar100

环境

操作系统：macOS 10.15.5

IDE：Xcode 11.5

运行设备：Simulator iPhone SE 2nd

执行结果

image

接下来按照这个流程来进行代码编写，从 开始设置图层CAEAGLLayer->完成FrameBuffer 当作是渲染的准备工作，最后一步渲染会继续拆分

image

引入必要的库——OpenGL ES2.0

#import <OpenGLES/ES2/gl.h>

定义需要用到的变量属性

@interface DrawView()

/// 在iOS和tvOS上绘制OpenGL ES内容的图层，CAEAGLLayer继承于CALayer
@property(nonatomic,strong)CAEAGLLayer *myEagLayer;

/// 创建的上下文
@property(nonatomic,strong)EAGLContext *myContext;

/// 渲染缓存区 （其实是该缓存区的ID，通过ID可以访问该缓存区，类比指针）
@property(nonatomic,assign)GLuint myColorRenderBuffer;
/// 帧缓存区 （同上）
@property(nonatomic,assign)GLuint myColorFrameBuffer;

/// 自定义的可编程管线，编译并附着了顶点着色器和片元着色器，可以将CPU内的顶点等其他数据传入自定义着色器
@property(nonatomic,assign)GLuint myPrograme;

@end

一、设置渲染的图层CAEAGLLayer

重写layerClass 将self.layer从CALayer变成->CAEAGLLayer

// 代码
+ (Class)layerClass
{
    return [CAEAGLLayer class];
}

开始设置图层

// 代码
- (void)setupLayer
{
    //1.创建特殊图层
    self.myEagLayer = (CAEAGLLayer *)self.layer;
    
    //2.设置scale
    [self setContentScaleFactor:[[UIScreen mainScreen]scale]];

    //3.设置描述属性，这里设置不维持渲染内容以及颜色格式为RGBA8
    NSDictionary *drawableProperties = @{
        kEAGLDrawablePropertyRetainedBacking: @false,
        kEAGLDrawablePropertyColorFormat    : kEAGLColorFormatRGBA8
    };
    
    self.myEagLayer.drawableProperties = drawableProperties;
  
}

CAEAGLLayer是Apple在QuartzCore里为我们提供的绘制图层，我们绘制的纹理等可以绘制在这个图层，他继承于CALayer，并且继承了协议EAGLDrawable

image

drawableProperties中kEAGLDrawablePropertyRetainedBacking表示绘图表面显示后，是否保留其内容

drawableProperties中的kEAGLDrawablePropertyColorFormat表示绘制表面的内部颜色缓存区格式
下面这是Apple给出的定义

/************************************************************************/
/* Values for kEAGLDrawablePropertyColorFormat key                      */
/************************************************************************/
EAGL_EXTERN NSString * const kEAGLColorFormatRGBA8; // 32位RGBA的颜色，4*8=32位
EAGL_EXTERN NSString * const kEAGLColorFormatRGB565;// 16位RGB的颜色
EAGL_EXTERN NSString * const kEAGLColorFormatSRGBA8 // sRGB代表了标准的红、绿、蓝，即CRT显示器、LCD显示器、投影机、打印机以及其他设备中色彩再现所使用的三个基本色素。sRGB的色彩空间基于独立的色彩坐标，可以使色彩在不同的设备使用传输中对应于同一个色彩坐标体系，而不受这些设备各自具有的不同色彩坐标的影响。NS_AVAILABLE_IOS(7_0);

二、创建上下文EAGLContext

-(void)setupContext
{
    //1.指定OpenGL ES 渲染API版本，我们使用2.0
    EAGLRenderingAPI api = kEAGLRenderingAPIOpenGLES2;
    
    //2.创建图形上下文
    EAGLContext *context = [[EAGLContext alloc]initWithAPI:api];
    
    //3.判断是否创建成功
    if (!context) {
        NSLog(@"Create context failed!");
        return;
    }
    
    //4.设置图形上下文
    if (![EAGLContext setCurrentContext:context]) {
        NSLog(@"setCurrentContext failed!");
        return;
    }
    
    //5.将局部context，变成全局的
    self.myContext = context;  
}

三、清空缓存区

-(void)deleteRenderAndFrameBuffer
{
    /*
     buffer分为frame buffer 和 render buffer2个大类。
     其中frame buffer 相当于render buffer的管理者。
     frame buffer object即称FBO。
     render buffer则又可分为3类。colorBuffer、depthBuffer、stencilBuffer。
     */
    
    glDeleteBuffers(1, &_myColorRenderBuffer);
    self.myColorRenderBuffer = 0;
    
    glDeleteBuffers(1, &_myColorFrameBuffer);
    self.myColorFrameBuffer = 0;
}

在这里，出现了两个缓存区：framebuffer 、 renderbuffer

framebuffer 和 renderbuffer

framebuffer在离屏渲染的时候曾提到过，这是一个最终绘制完成的缓存区，当屏幕刷新控制器刷新（60Hz）时，从framebuffer交给屏幕显示。
一个framebuffer object 对象又被称为FBO，下面均使用FBO

renderbuffer是什么呢？下图是苹果官方提供的framebuffer和renderbuffer的关系图。renderbuffer有三种：colorbuffer（颜色）、depthbuffer（深度）、texture（纹理）。这三种分别用来存放color、depth、texture。FBO则提供了三个附着点 GL_COLOR_ATTACHMENT0 、 GL_DEPTH_ATTACHMENT 、GL_STENCIL_ATTACHMENT 分别用来挂载（绑定） colorbuffer object 、depthbuffer object 、 texture。

图中只画出了GL_COLOR_ATTACHMENT0和GL_DEPTH_ATTACHMENT

image

四、设置缓存区RenderBuffer

- (void)setupRenderBuffer
{
    //1.定义一个缓存区ID
    GLuint buffer;
    
    //2.申请一个缓存区标志
    glGenRenderbuffers(1, &buffer);
    
    //3.
    self.myColorRenderBuffer = buffer;
    
    //4.将标识符绑定到GL_RENDERBUFFER
    glBindRenderbuffer(GL_RENDERBUFFER, self.myColorRenderBuffer);
    
    //5.将可绘制对象drawable object's  CAEAGLLayer的存储绑定到OpenGL ES renderBuffer对象
    [self.myContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.myEagLayer];
}

苹果官方文档也讲的很清楚：申请、绑定、
存储到self.myEagLayer


image

五、设置缓存区FrameBuffer

- (void)setupFrameBuffer
{
    //1.定义一个缓存区ID
    GLuint buffer;
    
    //2.申请一个缓存区标志
    glGenBuffers(1, &buffer);
    
    //3. 
    self.myColorFrameBuffer = buffer;
    
    //4. 将申请的缓存区标志和缓存区绑定，ID即该缓存区，通过使用ID就是在使用缓存区
    glBindFramebuffer(GL_FRAMEBUFFER, self.myColorFrameBuffer);
    
    /*生成帧缓存区之后，则需要将renderbuffer跟framebuffer进行绑定，
     调用glFramebufferRenderbuffer函数进行绑定到对应的附着点上，后面的绘制才能起作用
     */
    
    //5.将渲染缓存区myColorRenderBuffer 通过glFramebufferRenderbuffer函数绑定到 GL_COLOR_ATTACHMENT0上。
    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, self.myColorRenderBuffer);
    
}

步骤和前面的renderbuffer差不多

  • 使用函数：glGenBuffers 申请缓存区标志
  • 使用函数：glBindFramebuffer 绑定缓存区标志和真实的缓存区，后面可以直接使用此标志，类别指针来理解。
  • 但是接下来不同于renderbuffer，framebuffer是将renderbuffer绑定到framebuffer自己的GL_COLOR_ATTACHMENT0位置，GL_COLOR_ATTACHMENT0是一个位置。

六、渲染

这一步算是比较核心，需要准备绘制图形的编译着色器->使用program->坐标——顶点数据->图片解码->加载纹理->提交framebuffer显示。

这一步的方法，我们命名为- (void)renderDraw {}, 下面的代码块和用到完整方法均是在此方法内执行或调用

- (void)renderDraw
{
    // 常规基础操作：清除背景色、设置视口
    
    // 读取顶点着色器、片元着色器
    
    // 加载编译后的顶点、片元着色器
    
    // 链接、使用附着了两大着色器的program
    
    // 设置顶点坐标和纹理坐标
    
    // 处理顶点：申请顶点缓存区、
    
    // 加载纹理：（图片解码）
    
    // 绘制、提交显示
}

1、常规基础操作：清除背景色、设置视口

// renderDraw的代码
//设置清屏颜色
glClearColor(0.3f, 0.45f, 0.5f, 1.0f);
//清除屏幕
glClear(GL_COLOR_BUFFER_BIT);
    
//1.设置视口大小
CGFloat scale = [[UIScreen mainScreen]scale];
glViewport(self.frame.origin.x * scale, self.frame.origin.y * scale, self.frame.size.width * scale, self.frame.size.height * scale);

2、读取顶点着色器、片元着色器

我们熟悉的美颜相机的各种滤镜，其实就是用GLSL语言自定义顶点或者片元着色器，在GPUImage的代码里，能看到不同滤镜的着色器代码。但是怎样用GLSL去写一个自定义滤镜，后面开专题案例，也可以参考GPUImage，它里面有非常丰富的GLSL滤镜代码。

// renderDraw的代码
// 读取自定义的两个着色器文件
NSString *vertFile = [[NSBundle mainBundle]pathForResource:@"shaderv" ofType:@"vsh"];
    NSString *fragFile = [[NSBundle mainBundle]pathForResource:@"shaderf" ofType:@"fsh"];

这里需要说明一下，因为Xcode不支持编译GLSL，所以顶点着色器和片元着色器就是两段字符串文本，我只是将他们单独写在两个文件里，再读取。事实上这两段文本也可以以其他的形态存在，在GPUImage中，这两个着色器就是以C字符串的形式同时定义在.m文件里，只要拿到的是字符串，能满足OpenGL指定的方法去编译即可

3、加载编译后的顶点、片元着色器

上面也讲了，Xcode不支持编译着色器，我们需要OpenGL自己去编译，然后附着到program上，点到为止，剩下的事情，由program继续完成。所以这一步，我们的任务是：将着色器字符串编译->附着到program。

我们先封装一个着色器编译方法compileShader：type：file：

// 着色器编译
//shader：编译完存储的底层地址
//type：编译的类型，GL_VERTEX_SHADER（顶点）、GL_FRAGMENT_SHADER(片元)
//file：文件路径
- (void)compileShader:(GLuint *)shader type:(GLenum)type file:(NSString *)file
{
    
    //1.读取文件路径字符串
    NSString* content = [NSString stringWithContentsOfFile:file encoding:NSUTF8StringEncoding error:nil];
    const GLchar* source = (GLchar *)[content UTF8String];
    
    //2.创建一个shader（根据type类型）
    *shader = glCreateShader(type);
    
    //3.将着色器源码附加到着色器对象上。
    //参数1：shader,要编译的着色器对象 *shader
    //参数2：numOfStrings,传递的源码字符串数量 1个
    //参数3：strings,着色器程序的源码（真正的着色器程序源码）
    //参数4：lenOfStrings,长度，具有每个字符串长度的数组，或NULL，这意味着字符串是NULL终止的
    glShaderSource(*shader, 1, &source,NULL);
    
    //4.把着色器源代码编译成目标代码
    glCompileShader(*shader);
}

这段代码就干了三件事：

  • 创建shader——————————————glCreateShader
  • 附着shader的GLSL源码————-glShaderSource
  • 编译shader——————————————glCompileShader

回到renderDraw方法，这是我们整个渲染模块的主函数。

// renderDraw的代码
// 1、定义两个着色器 
GLuint verShader, fragShader;

// 2、编译顶点和片元着色器
[self compileShader:&verShader type:GL_VERTEX_SHADER file:vert];
[self compileShader:&fragShader type:GL_FRAGMENT_SHADER file:frag];

// 3、创建program
self.myPrograme = glCreateProgram();

// 4、将编译的着色器附着到program
glAttachShader(program, verShader);
glAttachShader(program, fragShader);

// 5.释放不需要的shader
glDeleteShader(verShader);
glDeleteShader(fragShader);

此刻我们就已经拿到了附着了编译好着色器的program——self.myPrograme。
在拿到编译好的shader后，这段代码其实就干了两件事，目的是获取program：

  • 创建program
  • 附着shader到program

4、链接、使用附着了两大着色器的program

上面已经提到Program，Program干什么，打个比方：她就像是拥有了两项已经练成（编译附着）的绝世武功（着色器），而我们又不会，那我们只有通过告诉她做什么，间接地使用了这两项绝世武功（着色器）。所以program更像是一个OC/swift和GLSL通信的桥梁。 就像是JSCoreBridge的作用!!!

// renderDraw的代码
// 1、链接program
glLinkProgram(self.myPrograme);
GLint linkStatus;
// 2.获取链接状态
glGetProgramiv(self.myPrograme, GL_LINK_STATUS, &linkStatus);
if (linkStatus == GL_FALSE) {
    // 链接异常处理
    return;
}
// 3.使用program
glUseProgram(self.myPrograme);

值得注意的是———— 到这一步为止，我们已经完成开始使用program，目的是为了将顶点数据等其他传入顶点和片元着色器，所以我们也可以先做接下来的 设置顶点坐标和纹理坐标 和 设置顶点数据 ，只要在通过program将数据传入着色器之前完成使用program就可以。

5、设置顶点坐标和纹理坐标

// renderDraw的代码
GLfloat attrArr[] =
    {
        0.5f, -0.5f, -1.0f,     1.0f, 0.0f,
        -0.5f, 0.5f, -1.0f,     0.0f, 1.0f,
        -0.5f, -0.5f, -1.0f,    0.0f, 0.0f,
        
        0.5f, 0.5f, -1.0f,      1.0f, 1.0f,
        -0.5f, 0.5f, -1.0f,     0.0f, 1.0f,
        0.5f, -0.5f, -1.0f,     1.0f, 0.0f,
    };

attAr存放了红色虚线分割的两个三角形，共计六个顶点和纹理坐标。
前3个是顶点坐标，后边2个是映射的纹理坐标

这里的坐标系是物体坐标系，即物体中心点是坐标中心点，如下图所示：左边是按照数组映射了纹理的顶点坐标系，右边是纹理坐标系。


image

补充： 我们在贴图的时候，纹理的坐标系以左下角为原点。长宽均为1，和纹理图片的实际宽高无关。我们要做的就是将纹理对应的映射到顶点上，完成贴图。

6、处理顶点数据

这一步，我们的目的很简单：就是申请一块顶点缓存区存放刚刚的顶点数据，再将缓存区内的顶点通过program传给顶点着色器。

（1）首先：申请顶点缓存区，存入数据

又是缓存三步曲：申请glGenBuffers、绑定glBindBuffer、放数据glBufferData

// renderDraw的代码
GLuint attrBuffer;
// 1、申请一个缓存区标识符
glGenBuffers(1, &attrBuffer);
// 2、将attrBuffer绑定到GL_ARRAY_BUFFER标识符上
glBindBuffer(GL_ARRAY_BUFFER, attrBuffer);
// 3、把顶点数据从CPU内存复制到GPU上
glBufferData(GL_ARRAY_BUFFER,sizeof(attrArr),attrArr,GL_DYNAMIC_DRAW);

（2）将顶点数据通过myPrograme中的传递到顶点着色程序的position

  • glGetAttribLocation/glGetUniformLocation 获取着色器中定义的变量
// renderDraw的代码
// “position”是着色器中定义的变量名，先通过glGetAttribLocation获取着色器中这个变量标志，如果position是用uniform定义，则使用glGetUniformLocation
GLuint position = glGetAttribLocation(self.myPrograme, "position");
// 设置合适的格式从buffer里面读取数据
glEnableVertexAttribArray(position);
// 设置读取方式
glVertexAttribPointer(position, 3, GL_FLOAT,GL_FALSE,sizeof(GLfloat) * 5, NULL);

这也是OC和着色器的数据传递的固定格式。其中的glVertexAttribPointer

//参数1：index 顶点数据的索引
//参数2：size 每个顶点属性的组件数量，1，2，3，或者4.默认初始值是4.
//参数3：type 数据中的每个组件的类型，常用的有GL_FLOAT,GL_BYTE,GL_SHORT。默认初始值为GL_FLOAT
//参数4：normalized 固定点数据值是否应该归一化，或者直接转换为固定值。（GL_FALSE）
//参数5：stride 连续顶点属性之间的偏移量，默认为0；
//参数6：指定一个指针，指向数组中的第一个顶点属性的第一个组件。默认为0
glVertexAttribPointer (GLuint indx, GLint size, GLenum type, GLboolean normalized, GLsizei stride, const GLvoid* ptr)

（3）将纹理数据通过myPrograme中的传递到顶点着色程序的textCoordinate

// renderDraw的代码

GLuint textCoor = glGetAttribLocation(self.myPrograme, "textCoordinate");
glEnableVertexAttribArray(textCoor);
glVertexAttribPointer(textCoor, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*5, (float *)NULL + 3);

7、加载纹理

我们封装一个方法setupTexture从图片中获取纹理

// renderDraw的代码

[self setupTexture:@"bali"];

setupTexture方法展开：

- (GLuint)setupTexture:(NSString *)fileName {
    
    //1、将 UIImage 转换为 CGImageRef
    CGImageRef spriteImage = [UIImage imageNamed:fileName].CGImage;
    
    //判断图片是否获取成功
    if (!spriteImage) {
        NSLog(@"Failed to load image %@", fileName);
        exit(1);
    }
    
    //2、读取图片的大小，宽和高
    size_t width = CGImageGetWidth(spriteImage);
    size_t height = CGImageGetHeight(spriteImage);
    
    //3.获取图片字节数 宽*高*4（RGBA）
    GLubyte * spriteData = (GLubyte *) calloc(width * height * 4, sizeof(GLubyte));
    
    //4.创建上下文
    /*
     参数1：data,指向要渲染的绘制图像的内存地址
     参数2：width,bitmap的宽度，单位为像素
     参数3：height,bitmap的高度，单位为像素
     参数4：bitPerComponent,内存中像素的每个组件的位数，比如32位RGBA，就设置为8
     参数5：bytesPerRow,bitmap的没一行的内存所占的比特数
     参数6：colorSpace,bitmap上使用的颜色空间  kCGImageAlphaPremultipliedLast：RGBA
     */
    CGContextRef spriteContext = CGBitmapContextCreate(spriteData, width, height, 8, width*4,CGImageGetColorSpace(spriteImage), kCGImageAlphaPremultipliedLast);
    

    //5、在CGContextRef上--> 将图片绘制出来
    /*
     CGContextDrawImage 使用的是Core Graphics框架，坐标系与UIKit 不一样。UIKit框架的原点在屏幕的左上角，Core Graphics框架的原点在屏幕的左下角。
     CGContextDrawImage 
     参数1：绘图上下文
     参数2：rect坐标
     参数3：绘制的图片
     */
    CGRect rect = CGRectMake(0, 0, width, height);
   
    //6.使用默认方式绘制
    CGContextDrawImage(spriteContext, rect, spriteImage);
   
    //7、画图完毕就释放上下文
    CGContextRelease(spriteContext);
    
    //8、绑定纹理到默认的纹理ID（
    glBindTexture(GL_TEXTURE_2D, 0);
    
    //9.设置纹理属性
    /*
     参数1：纹理维度
     参数2：线性过滤、为s,t坐标设置模式
     参数3：wrapMode,环绕模式
     */
    glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR );
    glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR );
    glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
    glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
    
    float fw = width, fh = height;
    
    //10.载入纹理2D数据
    /*
     参数1：纹理模式，GL_TEXTURE_1D、GL_TEXTURE_2D、GL_TEXTURE_3D
     参数2：加载的层次，一般设置为0
     参数3：纹理的颜色值GL_RGBA
     参数4：宽
     参数5：高
     参数6：border，边界宽度
     参数7：format
     参数8：type
     参数9：纹理数据
     */
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, fw, fh, 0, GL_RGBA, GL_UNSIGNED_BYTE, spriteData);
    
    //11.释放spriteData
    free(spriteData);   
    return 0;
}

8、绘制、提交显示

设置纹理采样器 sampler2D

glUniform1i(glGetUniformLocation(self.myPrograme, "colorMap"), 0);

绘图

glDrawArrays(GL_TRIANGLES, 0, 6);

从渲染缓存区显示到屏幕上

[self.myContext presentRenderbuffer:GL_RENDERBUFFER];

总结

代码的核心在于文章的 渲染 一大段的分析内。

第一个点：缓存区的使用

// 1、申请标志
glGenBuffers (GLsizei n, GLuint* buffers);
// 2、绑定标志和缓存区
glBindBuffer (GLenum target, GLuint buffer);// 普通buffer绑定
glBindFramebuffer (GLenum target, GLuint framebuffer);//Framebuffer绑定
glBindRenderbuffer (GLenum target, GLuint renderbuffer);//Renderbuffer的绑定

第二个点：着色器的编译和编写

// 1、创建
glCreateShader (GLenum type); 
// 2、附着GLSL源码字符串
glShaderSource (GLuint shader, GLsizei count, const GLchar* const *string, const GLint* length); 
// 3、编译
glCompileShader (GLuint shader);

第三个点：program的创建和使用

// 1、创建
glCreateProgram (void) ; 
// 2、附着着色器
glAttachShader (GLuint program, GLuint shader); // 附着顶点着色器
glAttachShader (GLuint program, GLuint shader); // 附着片元着色器
// 3、链接
glLinkProgram (GLuint program); 
// 4、使用
glUseProgram (GLuint program);

第四个点：CPU与GPU的数据传递，通过program，将数据传给着色器

// 1、从program中获得着色器的输入变量
glGetAttribLocation; // 获得attribute定义的输入变量
glGetUniformLocation;// 获得uniform定义的输入变量
// 2、设置合适的格式从buffer里面读取数据
glEnableVertexAttribArray
// 3、设置读取方式
glVertexAttribPointer;

第五个点：图片的解码
就是setupTexture方法

这个案例只是简单以一张静态图片为例。但是遗留了一个小问题：我们在构造顶点数据时，Y轴正向是向上的，而经过一系列坐标系转换后，得到iOS手机屏幕坐标系截然相反，Y轴是向下的，最终呈现了图片倒置的情况。就需要对图片做反转处理，这个可以在顶点着色器内完成，也可以在OC代码里完成。

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,928评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,192评论 3赞 387
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 159,468评论 0赞 349
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,186评论 1赞 286
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,295评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,374评论 1赞 292
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,403评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,186评论 0赞 269
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,610评论 1赞 306
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,906评论 2赞 328
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,075评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,755评论 4赞 337
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,393评论 3赞 320
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,079评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,313评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,934评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,963评论 2赞 351