问题
So i am drawing a Point at a certain ... well ... point of the screen that is then moving around. My Vertex Shader looks like this.
private final String vertexShaderCode =
"attribute vec4 vPosition;" +
"uniform mat4 Projection; \n" +
"uniform mat4 ModelView; \n" +
"void main() {" +
" gl_Position = Projection * ModelView * vPosition;" +
" gl_PointSize = 900.0; " +
"}";
What i am trying to achive is to then render a circle around the position of this one vertice. For that i am using the fragment shader:
private final String fragmentShaderCode =
"precision highp float; \n" +
"uniform vec2 aCirclePosition; \n" +
"uniform float aRadius; \n" +
"uniform vec4 aColor; \n" +
"const float threshold = 0.3;\n" +
"void main() \n" +
"{ \n" +
" float d, dist;\n" +
" dist = distance(aCirclePosition, gl_FragCoord.xy);\n" +
" if(dist == 0.)\n" +
" dist = 1.;\n" +
" d = aRadius / dist;\n" +
" if(d >= 1.)\n" +
" gl_FragColor = aColor;\n" +
" else if(d >= 1. - threshold) \n" +
" {\n" +
" float a = (d - (1. - threshold)) / threshold;\n" +
" gl_FragColor = vec4(0., 0., 0., 1.); \n" +
" }\n" +
" else\n" +
" gl_FragColor = vec4(aColor.r, aColor.g, aColor.b, 0.);\n" +
"} \n";
as shown in this example: https://gist.github.com/beetsolutions/9c343f86ec44987de4550cada118e560
However, with this the drawn circle will always remain at a static position on the screen independent of the actual position of the one vertice i use. Is there any way to link these two positions or achive what i am trying to do in any other way?
My idea was to use a "varying" variable in the Vertice Shader which will hold the position, however it seems like that does not work, since they use different spaces, (i believe the gl_position in the vertex shader is in clip space while the fragment shader uses actual screen coordinates but im not sure there), and i have no clue on how i would transform them.
Could someone help me or point me in the right direction to solving that problem? I really just started working with openGL so please tell me if there is something fundemental im mising here.
回答1:
Calculate the window coordinate of the point in the vertex shader. For thsi you have to know the size of the viewport (uResolution). Pass the position of the point to the fragment shader (pointPos):
precision mediump float;
attribute vec4 vPosition;
varying vec2 pointPos;
uniform vec2 uResolution; // = (window-width, window-height)
uniform mat4 Projection;
uniform mat4 ModelView;
void main()
{
gl_Position = Projection * ModelView * vPosition;
gl_PointSize = 900.0;
vec2 ndcPos = gl_Position.xy / gl_Position.w;
pointPos = uResolution * (ndcPos*0.5 + 0.5);
}
Use the position of the point (pointPos) instead of the uniform aCirclePosition in the fragment shader.
If you want to restirct the point to a circular area, then you can use the discard keyword to prevent fragment shader outputs:
precision highp float;
varying vec2 pointPos;
uniform float aRadius;
uniform vec4 aColor;
const float threshold = 0.3;
void main()
{
float dist = distance(pointPos, gl_FragCoord.xy);
if (dist > aRadius)
discard;
float d = dist / aRadius;
vec3 color = mix(aColor.rgb, vec3(0.0), step(1.0-threshold, d));
gl_FragColor = vec4(color, 1.0);
}
Note the varying variables of a point primitive are not interpolated, because the varying variable are interpolated over the primitive being rendered, but a point has only a single coordinate.
See OpenGL ES 2.0 Full Specification; 3.3 Points; page 51:
[...] All fragments produced in rasterizing a point are assigned the same associated data, which are those of the vertex corresponding to the point.
See the following WebGL example, where I used the shader from the answer:
var gl;
var prog;
var bufObj = {};
var ShaderProgram = {};
function renderScene(){
var canvas = document.getElementById( "ogl-canvas" );
var vp = [canvas.width, canvas.height];
gl.viewport( 0, 0, canvas.width, canvas.height );
gl.enable( gl.DEPTH_TEST );
gl.clearColor( 0.0, 0.0, 1.0, 1.0 );
gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );
ShaderProgram.Use( progDraw );
ShaderProgram.SetUniformF1( progDraw, "aRadius", 50 )
ShaderProgram.SetUniformF2( progDraw, "uResolution", [canvas.width, canvas.height] )
ShaderProgram.SetUniformF4( progDraw, "aColor", [1.0, 1.0, 0.0, 1.0] )
gl.enableVertexAttribArray( progDraw.inPos );
gl.bindBuffer( gl.ARRAY_BUFFER, bufObj.pos );
gl.vertexAttribPointer( progDraw.inPos, 2, gl.FLOAT, false, 0, 0 );
gl.drawArrays( gl.POINTS, 0, 5 );
gl.disableVertexAttribArray( progDraw.pos );
requestAnimationFrame(renderScene);
}
function initScene() {
var canvas = document.getElementById( "ogl-canvas");
gl = canvas.getContext( "experimental-webgl" );
if ( !gl )
return;
progDraw = ShaderProgram.Create(
[ { source : "draw-shader-vs", stage : gl.VERTEX_SHADER },
{ source : "draw-shader-fs", stage : gl.FRAGMENT_SHADER }
] );
progDraw.inPos = gl.getAttribLocation( progDraw, "vPosition" );
if ( prog == 0 )
return;
var pos = [ 0.0, 1.0, 0.0, -1.0, 0.0, 0.0, 1.0, 0.0, -1.0, 0.0 ];
bufObj.pos = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, bufObj.pos );
gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( pos ), gl.STATIC_DRAW );
}
ShaderProgram.Create = function( shaderList ) {
var shaderObjs = [];
for ( var i_sh = 0; i_sh < shaderList.length; ++ i_sh ) {
var shderObj = this.CompileShader( shaderList[i_sh].source, shaderList[i_sh].stage );
if ( shderObj == 0 )
return 0;
shaderObjs.push( shderObj );
}
var progObj = this.LinkProgram( shaderObjs )
if ( progObj != 0 ) {
progObj.attribIndex = {};
var noOfAttributes = gl.getProgramParameter( progObj, gl.ACTIVE_ATTRIBUTES );
for ( var i_n = 0; i_n < noOfAttributes; ++ i_n ) {
var name = gl.getActiveAttrib( progObj, i_n ).name;
progObj.attribIndex[name] = gl.getAttribLocation( progObj, name );
}
progObj.unifomLocation = {};
var noOfUniforms = gl.getProgramParameter( progObj, gl.ACTIVE_UNIFORMS );
for ( var i_n = 0; i_n < noOfUniforms; ++ i_n ) {
var name = gl.getActiveUniform( progObj, i_n ).name;
progObj.unifomLocation[name] = gl.getUniformLocation( progObj, name );
}
}
return progObj;
}
ShaderProgram.AttributeIndex = function( progObj, name ) { return progObj.attribIndex[name]; }
ShaderProgram.UniformLocation = function( progObj, name ) { return progObj.unifomLocation[name]; }
ShaderProgram.Use = function( progObj ) { gl.useProgram( progObj ); }
ShaderProgram.SetUniformI1 = function( progObj, name, val ) { if(progObj.unifomLocation[name]) gl.uniform1i( progObj.unifomLocation[name], val ); }
ShaderProgram.SetUniformF1 = function( progObj, name, val ) { if(progObj.unifomLocation[name]) gl.uniform1f( progObj.unifomLocation[name], val ); }
ShaderProgram.SetUniformF2 = function( progObj, name, arr ) { if(progObj.unifomLocation[name]) gl.uniform2fv( progObj.unifomLocation[name], arr ); }
ShaderProgram.SetUniformF3 = function( progObj, name, arr ) { if(progObj.unifomLocation[name]) gl.uniform3fv( progObj.unifomLocation[name], arr ); }
ShaderProgram.SetUniformF4 = function( progObj, name, arr ) { if(progObj.unifomLocation[name]) gl.uniform4fv( progObj.unifomLocation[name], arr ); }
ShaderProgram.SetUniformM33 = function( progObj, name, mat ) { if(progObj.unifomLocation[name]) gl.uniformMatrix3fv( progObj.unifomLocation[name], false, mat ); }
ShaderProgram.SetUniformM44 = function( progObj, name, mat ) { if(progObj.unifomLocation[name]) gl.uniformMatrix4fv( progObj.unifomLocation[name], false, mat ); }
ShaderProgram.CompileShader = function( source, shaderStage ) {
var shaderScript = document.getElementById(source);
if (shaderScript) {
source = "";
var node = shaderScript.firstChild;
while (node) {
if (node.nodeType == 3) source += node.textContent;
node = node.nextSibling;
}
}
var shaderObj = gl.createShader( shaderStage );
gl.shaderSource( shaderObj, source );
gl.compileShader( shaderObj );
var status = gl.getShaderParameter( shaderObj, gl.COMPILE_STATUS );
if ( !status ) alert(gl.getShaderInfoLog(shaderObj));
return status ? shaderObj : 0;
}
ShaderProgram.LinkProgram = function( shaderObjs ) {
var prog = gl.createProgram();
for ( var i_sh = 0; i_sh < shaderObjs.length; ++ i_sh )
gl.attachShader( prog, shaderObjs[i_sh] );
gl.linkProgram( prog );
status = gl.getProgramParameter( prog, gl.LINK_STATUS );
if ( !status ) alert("Could not initialise shaders");
gl.useProgram( null );
return status ? prog : 0;
}
initScene();
renderScene();<script id="draw-shader-vs" type="x-shader/x-vertex">
precision mediump float;
attribute vec4 vPosition;
varying vec2 pointPos;
uniform vec2 uResolution;
void main()
{
gl_PointSize = 100.0;
gl_Position = vPosition;
vec2 ndcPos = gl_Position.xy / gl_Position.w;
pointPos = uResolution * (ndcPos*0.5 + 0.5);
}
</script>
<script id="draw-shader-fs" type="x-shader/x-fragment">
precision highp float;
varying vec2 pointPos;
uniform float aRadius;
uniform vec4 aColor;
const float threshold = 0.3;
void main()
{
float dist = distance(pointPos, gl_FragCoord.xy);
if (dist > aRadius)
discard;
float d = dist / aRadius;
vec3 color = mix(aColor.rgb, vec3(0.0), step(1.0-threshold, d));
gl_FragColor = vec4(color, 1.0);
}
</script>
<canvas id="ogl-canvas" style="border: none;" width="256" height="256"></canvas>来源：https://stackoverflow.com/questions/54236612/is-there-a-way-to-draw-a-circle-with-the-fragment-shader-at-the-position-of-a-po