今天工作中需要做一个事情:

在shader内部做一些空间距离上的计算,而且需要对所有的点进行计算,符合条件的显示,不符合条件的点不显示。

思路很简单,在vertex shader内知道顶点坐标,进行计算,算好以后判断是否需要显示,例如设置alpha值,那么再将alpha值传给fragment shader,在里面设置alpha的值就好了。

基本代码如下

// vertex shader
#version 300 es
in vec4 vPosition;
in vec2 vTexCoord;
out float alpha;
void main() {
alpha = 1.0f;
if (vPosition...) {
alpha = 0.0f;
}
} // fragment shader
#version 300 es
in float alpha;
void main() {
// set the color..
}

看起来天衣无缝,逻辑合理,实际运行出现问题。由于我绘制的是一个球形,然后希望部分球面不显示,仅显示部分球面,基本功能确实实现了,但是显示与隐藏的边缘特别的粗糙,有特别大的锯齿。仔细思考一下,绘制球形是从上到下绘制三角形带得到的,出现的锯齿很有可能就是三角形的边。也就是说在计算的时候,很有可能是取了上传的顶点数据来进行计算,而没有对每一个点进行计算,所以只能判断若干顶点,而不是每一个点。

回顾一下 OpenGL 渲染管线的知识,在光栅化阶段,如何根据三个点画出三角形?如何获得每个点的纹理坐标?

通过光栅化将顶点按照拓扑结构渲染到屏幕上。例如,如果我们要绘制一个三角形那就意味着要找出位于三角形内部的所有点。对于这样每一个点,在光栅化过程中都会调用片元处理器对其进行处理。在片元处理器中我们可以通过对纹理进行取样或者使用其他技术来确定像素的颜色。

光栅器在三角形的三个顶点之间执行插值(比如说扫描线算法或者其他技术),并且通过执行片元着色器来“访问”三角形内的每一个像素点。片元着色器会返回此片元的颜色值,光栅器会将这个颜色值更新到颜色缓冲区内并最终显示出来(在通过一些其他测试例如深度测试之后),而从顶点着色器中传出的其他任何变量都不会经历上述步骤。如果片元着色器没有明确的表示要使用那个变量(对于同一个顶点着色器,我们可以有多个片元着色器与之对应),那么一个驱动优化程序将对 VS 进行优化,并丢弃 VS 中的任何只影响该变量的指令(这个特定的程序指的是由一个 VS 和 FS 组合成的 Shader 程序)。然而如果 FS 确实用到这个变量,那么光栅器在光栅化过程会对这个变量进行插值。这通常意味着紧挨着的两个像素之间的值会有一点差异(尽管三角形离相机越远,这种现象会越来越不明显)。

来源

结论:在vertex shader内对顶点做计算是错误的,一定要在fragment shader内,利用OpenGL插值的功能,拿到每一个点的坐标值,再进行计算。

OpenGL shader 中关于顶点坐标值的思考的更多相关文章

  1. unity, 在surface shader中访问顶点色

    //ref: Custom data computed per-vertex: http://docs.unity3d.com/Manual/SL-SurfaceShaderExamples.html ...

  2. A Simple OpenGL Shader Example

    A Simple OpenGL Shader Example eryar@163.com Abstract. OpenGL Shading Language, the high-level progr ...

  3. 通过cocos2d-x的CCGLProgram和CCShaderCache的实现来分析OpenGL ES中的Shader编程

    在OpenGL ES中,Shader是着色器,包括两种:顶点着色器(Vertex Shader)和片元着色器(Fragment Shader).每个program对象有且仅有一个Vertex Shad ...

  4. 【玩转cocos2d-x之四十】怎样在Cocos2d-x 3.0中使用opengl shader?

    有小伙伴提出了这个问题.事实上GLProgramCocos2d-x引擎自带了.全然能够直接拿来用. 先上图吧. 使用opengl前后的对照: watermark/2/text/aHR0cDovL2Js ...

  5. OpenGL下多个sampler在shader中的使用

    在OpenGL中,sampler2D/Cube等做为uniform可以在fragment shader中使用.结合glActiveTexture和glUniform1i,实现texture与sampl ...

  6. 统制Highcharts中x轴和y轴坐标值的密度

    统制Highcharts中x轴和y轴坐标值的密度 www.MyException.Cn 发布于:2012-06-26 10:04:13 浏览:688次 1 控制Highcharts中x轴和y轴坐标值的 ...

  7. Winform中设置ZedGraph鼠标悬浮显示举例最近曲线上的点的坐标值和X轴与Y轴的标题

    场景 Winform中设置ZedGraph鼠标双击获取距离最近曲线上的点的坐标值: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/ ...

  8. 定义一个类Point,代表一个点,public属性有x和y,方法有显示点坐标 show(),构造函数有两个参数分别给x,y赋值,在main方法中构造两个对象,再创建一方法(getMiddle)为取两个点构成线段的中点的坐标,参数为2个点对象,调用此方法后得到一个新的点,编写Application,显示该对象的坐标值。

    这个题让我更加明白了类创建对象的实质 代码中用到:1.对象作形参;2.对象作返回值 以下用代码具体分析: class Point1{ public double x; public double y; ...

  9. OpenGL Shader in OpenCASCADE

    OpenGL Shader in OpenCASCADE eryar@163.com Abstract. As implementation of one of the strategic steps ...

随机推荐

  1. git-简单流程(学习笔记)

    这是阅读廖雪峰的官方网站的笔记,用于自己以后回看 1.进入项目文件夹 初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: 第一步,使用命令git add <file ...

  2. 使用Visual Studio 2015 开发ASP.NET MVC 5 项目部署到Mono/Jexus

    最新的Mono 4.4已经支持运行asp.net mvc5项目,有的同学听了这句话就兴高采烈的拿起Visual Studio 2015创建了一个mvc 5的项目,然后部署到Mono上,浏览下发现一堆错 ...

  3. 你知道C#中的Lambda表达式的演化过程吗?

    那得从很久很久以前说起了,记得那个时候... 懵懂的记得从前有个叫委托的东西是那么的高深难懂. 委托的使用 例一: 什么是委托? 个人理解:用来传递方法的类型.(用来传递数字的类型有int.float ...

  4. Vue + Webpack + Vue-loader 系列教程(2)相关配置篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...

  5. <译>通过PowerShell工具跨多台服务器执行SQL脚本

    有时候,当我们并没有合适的第三方工具(大部分需要付费)去管理多台数据库服务器,那么如何做最省力.省心呢?!Powershell一个强大的工具,可以很方便帮到我们处理日常的数据库维护工作 .简单的几步搞 ...

  6. MAC Osx PHP安装指导

    php.ini的位置 Mac OS X中没有默认的php.ini文件,但是有对应的模版文件php.ini.default,位于/private/etc/php.ini.default 或者说 /etc ...

  7. 讓TQ2440也用上設備樹(1)

    作者:彭東林 郵箱:pengdonglin137@163.com QQ:405728433 開發板 TQ2440 + 64MB 內存 + 256MB Nand 軟件 Linux: Linux-4.9 ...

  8. VS项目中使用Nuget还原包后编译生产还一直报错?

    Nuget官网下载Nuget项目包的命令地址:https://www.nuget.org/packages 今天就遇到一个比较奇葩的问题,折腾了很久终于搞定了: 问题是这样的:我的解决方案原本是好好的 ...

  9. [转载]一个标准java程序员的进阶过程

    第一阶段:Java程序员 技术名称 内                 容 说明 Java语法基础 基本语法.数组.类.继承.多态.抽象类.接口.object对象.常用类(Math\Arrarys\S ...

  10. Flexible 弹性盒子模型之CSS flex-shrink 属性

    实例 让第二个元素收缩到其他元素的三分之一: 效果预览 div:nth-of-type(2){flex-shrink:3;} 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟在 - ...