2

Polygon 内に放射状のグラデーションをペイントしようとしています。私のステージは600x320です。グラデーションを描くことはできますが、「歪んでいる/引き伸ばされています」。目標は、ライトが生成するようなグラデーションです。

u_lightPosition相対値として渡されます: {0.5, 0.5}.
現在未使用は絶対値lightPositionAbsoluteとして渡されます。 {300.0, 160.0}

現在、私のフラグメントシェーダーは次のようになっています。

#ifdef GL_ES                            
precision lowp float;                   
#endif                                  
varying vec4 v_fragmentColor;   

uniform vec2 u_lightPosition;
uniform vec2 u_lightPositionAbsolute;
uniform vec4 u_outerColor;
uniform vec4 u_innerColor;
uniform float u_radius;

void main()                             
{
    vec2 resolution = vec2(600,320);
    vec2 position = ( gl_FragCoord.xy / resolution.xy );

    float distanceFromLight = length(position - u_lightPosition);

    gl_FragColor = mix(u_outerColor, u_innerColor, distanceFromLight);
}

円ポリゴンを使用すると、次のようになります。

ここに画像の説明を入力

4

3 に答える 3

2

わかりました、解決策が見つかりました。これは機能するようになったので、静かで明白です。絶対値ではなく相対値で作業したため、ストレッチが発生しました。シェーダーは次のようになります。

#ifdef GL_ES                            
precision lowp float;                   
#endif                                  
uniform vec2 u_lightPosition;
uniform float u_radius;

void main()                             
{
    float distance  = length( u_lightPosition - gl_FragCoord.xy );
    float intensity = 1.0 - min( distance, u_radius )/u_radius;

    gl_FragColor = vec4(intensity, intensity, intensity, 1.0);
}

編集:「ライト」のフォールオフを変更しました:

#ifdef GL_ES                            
precision lowp float;                   
#endif                                  
uniform vec2 u_lightPosition;
uniform float u_radius;

void main()                             
{
    float distance  = length( u_lightPosition - gl_FragCoord.xy );

    float maxDistance = pow( u_radius, 0.23);
    float quadDistance = pow( distance, 0.23);

    float quadIntensity = 1.0 - min( quadDistance, maxDistance )/maxDistance;

    gl_FragColor = vec4(quadIntensity, quadIntensity, quadIntensity, 1.0);
}
于 2012-07-26T16:12:38.350 に答える
1

あなたのシェーダーは問題ないと思いますが、問題はジオメトリ (または頂点シェーダー) にある可能性が最も高いです。

KickJS GLSL エディターでシェーダーの例を作成しました。正常に動作することがわかります。

http://goo.gl/viDKB

設定でメッシュの種類を変更できます。

于 2012-07-26T12:50:50.250 に答える
0

radius を float として渡しているため、x と y は同じですが、同じであってはなりません。

すなわち。画面 : 1280 x 800 、半径 300 = {300.0/1280.0,300.0/800.0 }

"float u_radiusX = (100.0/1280.0);\n"+ 
"float u_radiusY = (100.0/800.0);\n"+ 
"float distanceFromLightX  =  length(v_lightPos.x   - v_Pos.x );\n"+
"float distanceFromLightY  =  length(v_lightPos.y   - v_Pos.y );\n"+
"float quadIntensityX = (1.0-min(distanceFromLightX,u_radiusX)/u_radiusX);\n"+  
"float quadIntensityY = (1.0-min(distanceFromLightY,u_radiusY)/u_radiusY);\n"+  
//finally
"float quadIntensity = quadIntensityX*quadIntensityY;\n"+
"gl_FragColor = vec4(color.r*quadIntensity, color.g*quadIntensity, color.b*quadIntensity, 1.0);\n"

私はこれをこのように機能させました。ここで、v_Pos はアトリビュートの位置 (ライトの位置ではありません) * 前のシェーダーから変数を介して渡された行列です。

于 2013-01-25T01:52:12.063 に答える