美文网首页
OpenGL--渲染方式

OpenGL--渲染方式

作者: 照顾一下 | 来源:发表于2020-04-27 19:27 被阅读0次

前言

这篇文章主要目的是介绍OpenGL中的颜色混合、正背面剔除,只是作为入门的文章,如果想要深入了解它们的原理还需要继续研究。

一、颜色混合

用一个生活中的例子来介绍什么是颜色混合。
我们拿两块透明有色玻璃叠在一起,透过两块玻璃可以发现叠加的颜色跟两种颜色都不一样,它是一种新的颜色,这就是颜色混合。OpenGL中的颜色混合原理也是这样的,通过不同的颜色和对应的透明度计算出最终的颜色和透明度。

1.开启颜色混合

// 开启混合
glEnable(GL_BLEND);
// 混合因子
glBlendFunc(GL_DST_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

其中glBlendFunc这个函数是设置混合因子,不同的值对应的有不同的颜色混合算法,网上有很多文章解释了颜色混合的算法。个人觉得知道个大概就行,没有必要深究,因为你即便深究你还是没办法创造新的算法。而且算法也是很简单的计算。

2.iOS中的应用

CALayer有个alpha属性,同时颜色值RGBA中的A就是alpha,他们归根结底都是用到了颜色混合。当alpha为1时,也就是不透明,这种情况下,OpenGL会自动过滤该控件下层控件的颜色计算,因为他们本来就被上层的控件遮挡了。所以,能不用alpha就尽量不用,这样能减少GPU的开销。

3.离屏渲染

这里引入一个家喻户晓的概念,离屏渲染。关于离屏渲染的理解,笔者在网上看到了一篇文章对其进行详细介绍,附上地址:
https://www.jianshu.com/p/e92c7a8cea8f

二、正背面剔除

在开始正背面剔除之前,我们先了解一下OpenGL的正背面定义。OpenGL默认的正面是三角形顶点按逆时针顺序排列,这种方式让我想到了右手螺旋定则,判断电流的南北极,有兴趣的可以查查右手螺旋定则。当然,法向量计算跟这个也有关联。话不多说,进入主题。

1.开启正背面剔除

// 开启正背面剔除
glEnable(GL_CULL_FACE);
// 设置被剔除的面,设置正面还是背面被剔除
glCullFace(GL_BACK);
我们通过效果图来看看开启和不开启的区别。 没有开启正背面剔除.png 我们看到这个图形时,已经无法区分上下左右的面了,因为OpenGL绘制的时候并没有将我们认为是在背后的面隐藏,而是按照我们提供的顶点很耿直的在绘制。其结果就是这个效果图,看着非常难受,接下来我们开启正背面剔除。 开启正背面剔除.png

没有对比就没有伤害,开启了正背面剔除的图形看上去就很像立体图形了。之所以会出现这种情况,我们在没有开启正背面剔除时,我们就像有了透视眼,能看到被前方的三个面挡住的另外三个面。被我们的透视眼看到的实际上是另外三个面的内面,准确来讲是背面,因为这个立体图形我是按照实际生活中的立方体,展示在外面的是正面,而在立方体内部的是背面。背面没有被剔除我们就能看到了,所以才有了第一张图片出现的效果。如果我没有解释清楚正背面剔除,可以下载文章末尾提供的demo地址,自己运行试试。

总结

本来这章要解释深度测试的,但是由于笔者还没有找到合适的例子,因为OpenGL不开启深度测试也不清空深度缓冲区的情况下,照样能让图形进行3D变换。如果以后笔者找到了合适的例子再补上。
本文仅仅带小伙伴们了解了下颜色混合和正背面剔除的基本知识,至于实现的算法和为什么要在这样处理,不在本文的介绍范围之类。后续将要与纹理打交道,希望有兴趣的伙伴点个关注,点关注、不迷路。
demo地址还是跟之前文章一样:https://github.com/zhaoguyixia/OpenGL.git

相关文章

  • OpenGL--渲染方式

    前言 这篇文章主要目的是介绍OpenGL中的颜色混合、正背面剔除,只是作为入门的文章,如果想要深入了解它们的原理还...

  • OpenGL--渲染流程

    OpenGL 着色器流程 上图的着色器渲染流程中,圆角矩形表示固定功能函数阶段,二直角矩形表型可编程阶段;可编程阶...

  • 渲染方式

    BSR 客户端渲染 只在浏览器上执行的渲染例如常用到的 Js, Vue ,React 等 创建HTML 缺点 白...

  • OpenGL--深入解析离屏渲染的原理

    什么是离屏渲染 首先我们要了解GPU的渲染机制以及屏幕渲染的方式 GPU渲染机制:CPU通过解压计算好显示内容通过...

  • Android 图形渲染应用层简述

    一. 图形渲染方式 Android 图像渲染有两种方式一是 CPU 渲染, 另一种是 GPU 渲染 一) CPU ...

  • Paint高级用法

    渲染 Shader 着色器 Shader有5中渲染方式 BitmapShader 位图渲染 LinearGradi...

  • Vue渲染方式

    前言 所有代码运行Vue版本:2.5.16 Vue中的渲染方式个人总结可分为4种: 原有模板语法,挂载渲染 使用r...

  • NO.6 - 离屏渲染

    1.什么是离屏渲染 1.1渲染方式一:当前屏幕渲染 On-Screen Rendering意为当前屏幕渲染,指的是...

  • iOS离屏渲染原理

    1.什么是离屏渲染 说到离屏渲染,那我们就要说一下苹果的渲染方式有哪些,首先苹果这边渲染方式主要有两种On-S...

  • 三、iOS离屏渲染

    iOS离屏渲染 圆角不一定会造成离屏渲染 GPU屏幕渲染方式 On-Screen Rendering 当前屏幕渲染...

网友评论

      本文标题:OpenGL--渲染方式

      本文链接:https://www.haomeiwen.com/subject/ihykwhtx.html