标签: fragment-shader

如果在OpenGL管道中的光栅化阶段发生线性插值,并且顶点已经转换为屏幕空间,那么用于透视正确插值的深度信息来自何处？

任何人都可以详细描述OpenGL如何从屏幕空间原语转换为具有正确插值的片段？

我试图让本教程工作,但我遇到了两个问题,其中一个是以下问题.

当我按原样运行代码时,我在片段着色器中得到一个错误:THREE.WebGLShader: gl.getShaderInfoLog() ERROR: 0:2: '' : No precision specified for (float).所以我所做的是为我定义的每个浮点数/向量指定精度varying highp vec3 vNormal.这消除了错误,但我不明白为什么？我找不到任何其他将精度值添加到变量声明的示例.任何人都能解释为什么会这样吗？它与我的浏览器(Chrome 38)有关吗？

好吧,在我的GLSL片段着色器中,我希望能够计算片段与空间中特定行的距离.

结果是我首先尝试在顶点着色器中使用不同的vec2集来镜像最终的内容gl_FragCoord:

varying vec2 fake_frag_coord;
//in vertex shader:
gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;
fake_frag_coord=(gl_ModelViewProjectionMatrix * gl_Vertex).xy;

现在在片段着色器中我期望:

gl_FragCoord.xy==fake_frag_coord

但事实并非如此.管道做了什么操作gl_Position把它变成gl_FragCoord了我忽略的事情fake_frag_coord？

我一直在用OpenGL编写程序.最近,我开始学习OpenGL着色语言.我是新手; 所以请详细说明你的答案.

我的问题是:

1. GLSL中有哪些不同类型的变量(限定符)？
2. 它们用于什么？
3. 他们彼此如何不同？

我只熟悉从"顶点着色器"传递到"片段着色器"以在顶点之间进行插值的"变化"变量.除此之外,我什么都不知道.

我只想存储每个片段计算所需的权重数组.

这个:

float weights[5] = float[5](3.4, 4.2, 5.0, 5.2, 1.1);

只是抛出这个:

ERROR: 0:30: ']' : syntax error syntax error
ERROR: 0:30: ';' : syntax error syntax error

我使用canvas元素中的图像作为Three.js中的纹理,使用JavaScript在画布上执行图像处理,然后在纹理上调用needsUpdate().这有效,但速度很慢.

我想在片段着色器中执行图像计算.我发现很多例子几乎都是这样的:

• 着色器材质:http://mrdoob.github.io/three.js/examples/webgl_shader2.html此示例显示在片段着色器中执行的图像处理,但该着色器用作整个材质的片段着色器.我只想在纹理上使用着色器,然后将纹理用作第二种材质的组件.

• 渲染到纹理:https://threejsdoc.appspot.com/doc/three.js/examples/webgl_rtt.html这显示将整个场景渲染到WebGLRenderTarget并将其用作材质中的纹理.我只想预处理图像,而不是渲染整个场景.

• 效果作曲家:http://www.airtightinteractive.com/demos/js/shaders/preview/这表示将着色器应用为整个场景的后期处理.

编辑:这是另一个:

• 渲染到另一个场景:http://relicweb.com/webgl/rt.html此示例在Three.js中引用从WebGLRenderTarget(水模拟)中检索数据,使用第二个场景和自己的正交相机来渲染动态纹理WebGLRenderTarget,然后用作主场景中的纹理.我想这是上面列出的第一个"渲染到纹理"示例的一个特例,可能对我有用,但似乎过于复杂.

据我所知,理想情况下,我可以使用自己的片段着色器创建一个新的帧缓冲对象,自己渲染它,并将其输出用作另一个材质片段着色器的纹理均匀.这可能吗？

编辑2:看起来我可能会问这样的事情:THREE.js中的Shader Materials和GL Framebuffers ......虽然这个问题似乎没有得到解决.

我的片段着色器中有两个不同坐标 和 大小的纹理:

varying highp vec2 v_currentTextureCoords;
varying highp vec2 v_backgroundTextureCoords;
uniform sampler2D u_currentTexture;
uniform sampler2D u_backgroundTexture;

void main()
{
    vec4 currentColor = texture2D(u_currentTexture, v_currentTextureCoords);
    vec4 backgroundColor = texture2D(u_backgroundTexture, v_backgroundTextureCoords);

    gl_FragColor = backgroundColor;
}

这是相应的顶点着色器:

attribute vec4 a_position;
attribute vec2 a_currentTextureCoords;
attribute vec2 a_backgroundTextureCoords;
varying vec2 v_currentTextureCoords;
varying vec2 v_backgroundTextureCoords;

void main()
{
    gl_Position = a_position;
    v_currentTextureCoords = a_currentTextureCoords;
    v_backgroundTextureCoords = a_backgroundTextureCoords;
}

那些着色器负责渲染u_currentTexture.

编辑:用我的真实应用程序(Android应用程序)更新帖子和问题.

如上所述,这两个纹理是:

• u_backgroundTexture:这是一个视频流,全屏,大小为1080x1920
• u_currentTexture:它可以是任何图像,尺寸为469x833(较小但相同比例).

为了简化,现在, …

我想知道是否有人有完整的,工作的和有效的代码来在glsl中进行双三次纹理过滤.有这样的:

http://www.codeproject.com/Articles/236394/Bi-Cubic-and-Bi-Linear-Interpolation-with-GLSL 或 https://github.com/visionworkbench/visionworkbench/blob/master/src/vw/ GPU /着色器/口译/插值bicubic.glsl

但是它们都进行了16次纹理读取,其中只需要4次:

https://groups.google.com/forum/#!topic/comp.graphics.api.opengl/kqrujgJfTxo

然而,上面的方法使用了一个缺少的"cubic()"函数,我不知道它应该做什么,还需要一个无法解释的"texscale"参数.

还有NVidia版本:

http://http.developer.nvidia.com/GPUGems2/gpugems2_chapter20.html

但我相信这会使用CUDA,这是专门针对NVidia的卡片.我需要glsl.

我可以将nvidia版本移植到glsl,但我想先问一下是否有人已经有一个完整的,工作的glsl bicubic着色器.

我一直试图找到一个明确的答案,但似乎没有人明确提出这个问题.

我可以在WebGL Chrome,Firefox,Safari,IE等中使用1D采样器和1D纹理吗？

编辑

可以理解的是1确实是2的幂(2 ^ 0 = 1)意味着您可以有效地使用2D采样器和纹理,使用高度1和宽度256或512等来复制1D纹理.

1D纹理不是没有实际意义,它们的存在是因为它们不仅有目的,而且旨在转化为GPU本身的优化(而不是2D纹理).请记住,每个参数都需要时间加载到调用堆栈,几乎所有GPU编程都是优化每个可能操作的技术.

计算着色器经常需要单个浮动列表而没有额外的维度,使用1D纹理和采样器提供了强类型提供的相同清晰度.即,在1D结构中表示1D数据,并且在2D结构中表示2D数据.它还删除了索引到行/列转换所需的额外操作.

问题不在于他们是否有充分理由,而是支持他们.

在WebGL的1.0基于OpenGL ES 2.0的作为09/MAY/2014

• 目前没有1D纹理或采样器支持.

我正在尝试使用LibGDX制作复古风格的小游戏,我想让玩家选择几个角色的颜色,所以我想加载png索引图像,然后以编程方式更新调色板...错了我是^^ U.

看起来颜色托盘已经成为过去,而且看起来实现类似结果的最佳选择是使用着色器.

这是一张图片,解释了我现在正在尝试的内容:

我的意图是使用2张图片.其中之一pixel_guy.png 是只有6种颜色的png图像(这些颜色是其原始调色板).另一个图像colortable.png是一个6x6像素的png,其中包含6个调色板,每个调色板有6种颜色(每行是不同的调色板).来自第一行像素colortable.png的颜色将匹配使用的颜色pixel_guy.png,即第一个/原始调色板,其他行将是调色板2到6.我尝试实现的是使用colortable的第一个调色板来索引像素颜色,然后通过向着色器发送一个数字(从2到6)来更改调色板.

在做了一些研究之后,我在gamedev stackexchange中发现了一个帖子,显然它正是我想要的,所以我试着测试它.

我创建了顶点和片段着色器并加载了我的纹理(我想要交换的调色板,以及包含多个调色板的调色板),但输出是一个意外的白色图像.

我的顶点着色器:

attribute vec4 a_position;
attribute vec4 a_color;
attribute vec2 a_texCoord0;

uniform mat4 u_projTrans;

varying vec4 v_color;
varying vec2 v_texCoords;

void main() {
    v_color = a_color;
    v_texCoords = a_texCoord0;
    gl_Position = u_projTrans * a_position;
}

我的片段着色器:

    // Fragment shader
// Thanks to Zack The Human https://gamedev.stackexchange.com/questions/43294/creating-a-retro-style-palette-swapping-effect-in-opengl/

uniform sampler2D texture; // Texture to which we'll apply our shader? (should its name be …