1. 技术文章
  2. pass data between shader programs

pass data between shader programs

由 [亡魂溺海] 提交于 2020-08-10 19:21:12

问题


Ok I'm going to keep this as simple as possible. I want to pass data between shader programs. I'm using readPixels currently to do that but I feel it may be slowing operations down and I'm exploring faster options.

what my program does:

  1. program1 does my rendering to the canvas.
  2. program2 does some wonderful operations in it's shaders that I want to pass to program1.

MY QUESTIONS:

  1. is it possible to use the vbo from program2 and pass that to program1 for rendering? From what it sounds like in the link I give below, you can't share data across contexts, meaning the data from one buffer can't be used for another. But maybe I'm missing something.
  2. I believe the method mentioned in this article would do what I'm looking for by rendering to a canvas and then using texImage2D to update program1 (Copy framebuffer data from one WebGLRenderingContext to another?). Am I correct? If so, would this be faster than using readPixels? ( i ask because if using texImage2D is about the same I won't bother ).

thanks in advance to anyone who answers.


回答1:


The normal way to pass data from one shader to the next is to render to a texture (by attaching that texture to a framebuffer). Then pass that texture to the second shader. 

function main() {
  const gl = document.querySelector('canvas').getContext('webgl2');
  if (!gl) {
    return alert('need webgl2');
  }

  const vs1 = `#version 300 es
  void main () {
    gl_Position = vec4(0, 0, 0, 1);
    gl_PointSize = 64.0;
  }
  `;
  
  const fs1 = `#version 300 es
  precision highp float;
  out vec4 myOutColor;
  void main() {
    myOutColor = vec4(fract(gl_PointCoord * 4.), 0, 1);
  }
  `;
  
  const vs2 = `#version 300 es
  in vec4 position;
  void main () {
    gl_Position = position;
    gl_PointSize = 32.0;
  }
  `;
  
  const fs2 = `#version 300 es
  precision highp float;
  uniform sampler2D tex;
  out vec4 myOutColor;
  void main() {
    myOutColor = texture(tex, gl_PointCoord);
  }
  `;

  // make 2 programs
  const prg1 = twgl.createProgram(gl, [vs1, fs1]);
  const prg2 = twgl.createProgram(gl, [vs2, fs2]);

  // make a texture
  const tex = gl.createTexture();
  const texWidth = 64;
  const texHeight = 64;
  gl.bindTexture(gl.TEXTURE_2D, tex);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, texWidth, texHeight, 0,
                gl.RGBA, gl.UNSIGNED_BYTE, null);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

  // attach texture to framebuffer
  const fb = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0,
                          gl.TEXTURE_2D, tex, 0);

  // render to texture
  gl.viewport(0, 0, texWidth, texHeight);
  gl.useProgram(prg1);
  gl.drawArrays(gl.POINTS, 0, 1);
  
  // render texture (output of prg1) to canvas using prg2
  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
  gl.useProgram(prg2);
  // note: the texture is already bound to texture unit 0
  // and uniforms default to 0 so the texture is already setup
  const posLoc = gl.getAttribLocation(prg2, 'position')
  const numDraws = 12
  for (let i = 0; i < numDraws; ++i) {
    const a = i / numDraws * Math.PI * 2;
    gl.vertexAttrib2f(posLoc, Math.sin(a) * .7, Math.cos(a) * .7);
    gl.drawArrays(gl.POINTS, 0, 1);
  }
}
main();
<script src="https://twgljs.org/dist/4.x/twgl.min.js"></script>
<canvas></canvas>

You can also use "transform feedback" to store the outputs of a vertex shader to one or more buffers and of course those buffers can be used as input to another shader.

// this example from
// https://webgl2fundamentals.org/webgl/lessons/resources/webgl-state-diagram.html?exampleId=transform-feedback
const canvas = document.querySelector('canvas');
const gl = canvas.getContext('webgl2');

const genPointsVSGLSL = `#version 300 es
uniform int numPoints;
out vec2 position;
out vec4 color;

#define PI radians(180.0)

void main() {
    float u = float(gl_VertexID) / float(numPoints);
    float a = u * PI * 2.0;
    position = vec2(cos(a), sin(a)) * 0.8;
    color = vec4(u, 0, 1.0 - u, 1);
}
`;

const genPointsFSGLSL = `#version 300 es
void main() {
  discard;
}
`;

const drawVSGLSL = `#version 300 es
in vec4 position;
in vec4 color;

out vec4 v_color;

void main() {
  gl_PointSize = 20.0;
  gl_Position = position;
  v_color = color;
}
`;

const drawFSGLSL = `#version 300 es
precision highp float;

in vec4 v_color;

out vec4 outColor;

void main() {
    outColor = v_color;
}
`;

const createShader = function(gl, type, glsl) {
  const shader = gl.createShader(type)
  gl.shaderSource(shader, glsl)
  gl.compileShader(shader)
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    throw new Error(gl.getShaderInfoLog(shader))
  }
  return shader
};

const createProgram = function(gl, vsGLSL, fsGLSL, outVaryings) {
  const vs = createShader(gl, gl.VERTEX_SHADER, vsGLSL)
  const fs = createShader(gl, gl.FRAGMENT_SHADER, fsGLSL)
  const prg = gl.createProgram()
  gl.attachShader(prg, vs)
  gl.attachShader(prg, fs)
  if (outVaryings) {
    gl.transformFeedbackVaryings(prg, outVaryings, gl.SEPARATE_ATTRIBS)
  }
  gl.linkProgram(prg)
  if (!gl.getProgramParameter(prg, gl.LINK_STATUS)) {
    throw new Error(gl.getProgramParameter(prg))
  }
  return prg
};

const genProg = createProgram(gl, genPointsVSGLSL, genPointsFSGLSL, ['position', 'color']);
const drawProg = createProgram(gl, drawVSGLSL, drawFSGLSL);

const numPointsLoc = gl.getUniformLocation(genProg, 'numPoints');

const posLoc = gl.getAttribLocation(drawProg, 'position');
const colorLoc = gl.getAttribLocation(drawProg, 'color');

const numPoints = 24;

// make a vertex array and attach 2 buffers
// one for 2D positions, 1 for colors.
const dotVertexArray = gl.createVertexArray();
gl.bindVertexArray(dotVertexArray);

const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, numPoints * 2 * 4, gl.DYNAMIC_DRAW);
gl.enableVertexAttribArray(posLoc);
gl.vertexAttribPointer(
    posLoc,       // location
    2,            // size (components per iteration)
    gl.FLOAT,     // type of to get from buffer
    false,        // normalize
    0,            // stride (bytes to advance each iteration)
    0,            // offset (bytes from start of buffer)
);

const colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, numPoints * 4 * 4, gl.DYNAMIC_DRAW);
gl.enableVertexAttribArray(colorLoc);
gl.vertexAttribPointer(
    colorLoc,   // location
    4,          // size (components per iteration)
    gl.FLOAT,   // type of to get from buffer
    false,      // normalize
    0,          // stride (bytes to advance each iteration)
    0,          // offset (bytes from start of buffer)
);

// This is not really needed but if we end up binding anything
// to ELEMENT_ARRAY_BUFFER, say we are generating indexed geometry
// we'll change cubeVertexArray's ELEMENT_ARRAY_BUFFER. By binding
// null here that won't happen.
gl.bindVertexArray(null);

// setup a transform feedback object to write to
// the position and color buffers
const tf = gl.createTransformFeedback();
gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, tf);
gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, positionBuffer);
gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 1, colorBuffer);
gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, null);

// above this line is initialization code
// --------------------------------------
// below is rendering code.

// --------------------------------------
// First compute points into buffers

// no need to call the fragment shader
gl.enable(gl.RASTERIZER_DISCARD);

// unbind the buffers so we don't get errors.
gl.bindBuffer(gl.TRANSFORM_FEEDBACK_BUFFER, null);
gl.bindBuffer(gl.ARRAY_BUFFER, null);

gl.useProgram(genProg);

// generate numPoints of positions and colors
// into the buffers
gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, tf);
gl.beginTransformFeedback(gl.POINTS);
gl.uniform1i(numPointsLoc, numPoints);
gl.drawArrays(gl.POINTS, 0, numPoints);
gl.endTransformFeedback();
gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, null);

// turn on using fragment shaders again
gl.disable(gl.RASTERIZER_DISCARD);

// --------------------------------------
// Now draw using the buffers we just computed

gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

gl.bindVertexArray(dotVertexArray);
gl.useProgram(drawProg);
gl.drawArrays(gl.POINTS, 0, numPoints);
<script src="https://twgljs.org/dist/4.x/twgl.min.js"></script>
<canvas></canvas>

Also this answer might be useful.




回答2:


ok so what I was trying to do is something like the following ( hopefully this helps someone else in future ). Basically I want to have one shader doing calculations for movement (program#2) for another shader which will render (program#1). I want to avoid any vector calculations in JS. This example combines @gman's transform feedback sample and the sample I provided above:

const canvas = document.querySelector('canvas');
			var gl = canvas.getContext('webgl2', {preserveDrawingBuffer: true});
			
			
			// ___________shaders
			
			// ___________vs and fs #1

			const genPointsVSGLSL = `#version 300 es
			in vec4 aPos;
			void main(void) {
			   gl_PointSize = 20.0;
			   gl_Position = vec4( -0.01 + aPos.x , -0.01+aPos.y , aPos.zw);
			}
			`;

			const genPointsFSGLSL = `#version 300 es
			precision highp float;
			out vec4 color;
			void main() {
			 discard;
			 //color = vec4(0.5,0.5,0.0,1.0);
			}
			`;
		
		
		
			// ___________vs and fs #2
			
			const drawVSGLSL = `#version 300 es
			in vec4 position;

			void main() {
			  gl_PointSize = 20.0;
			  gl_Position = position;
			}
			`;

			const drawFSGLSL = `#version 300 es
			precision highp float;

			out vec4 outColor;

			void main() {
				outColor = vec4( 255.0,0.0,0.0,1.0 );
			}
			`;
			
		
		
		
			// create shaders and programs code

			const createShader = function(gl, type, glsl) {
			  const shader = gl.createShader(type)
			  gl.shaderSource(shader, glsl)
			  gl.compileShader(shader)
			  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
				throw new Error(gl.getShaderInfoLog(shader))
			  }
			  return shader
			};

			const createProgram = function(gl, vsGLSL, fsGLSL, outVaryings) {
			  const vs = createShader(gl, gl.VERTEX_SHADER, vsGLSL)
			  const fs = createShader(gl, gl.FRAGMENT_SHADER, fsGLSL)
			  const prg = gl.createProgram()
			  gl.attachShader(prg, vs)
			  gl.attachShader(prg, fs)
			  if (outVaryings) {
				gl.transformFeedbackVaryings(prg, outVaryings, gl.SEPARATE_ATTRIBS)
			  }
			  gl.linkProgram(prg)
			  if (!gl.getProgramParameter(prg, gl.LINK_STATUS)) {
				throw new Error(gl.getProgramParameter(prg))
			  }
			  return prg
			};

			const genProg = createProgram(gl, genPointsVSGLSL, genPointsFSGLSL, ['gl_Position']);
			const drawProg = createProgram(gl, drawVSGLSL, drawFSGLSL, ['gl_Position']);

			
			
			// program1 location attribute
			const positionLoc = gl.getAttribLocation( drawProg , 'position');
			// program2 location attribute
			const aPosLoc = gl.getAttribLocation( genProg , 'aPos');
		

		
			var vertizes = [0.8,0,0,1, 0.8,0.5,0,1];
			var indizes = vertizes.length/4;

		
			// create buffers and transform feedback
			var bufA = gl.createBuffer()
			gl.bindBuffer(gl.ARRAY_BUFFER, bufA)
			gl.bufferData(gl.ARRAY_BUFFER, new Float32Array( vertizes ), gl.DYNAMIC_COPY)

			var bufB = gl.createBuffer()
			gl.bindBuffer(gl.ARRAY_BUFFER, bufB)
			gl.bufferData(gl.ARRAY_BUFFER, new Float32Array( vertizes ) , gl.DYNAMIC_COPY)

			var transformFeedback = gl.createTransformFeedback()
			gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, transformFeedback)
		
		
		
		
			// draw

			function draw(){
				
				
				gl.useProgram( genProg );
				gl.clear(gl.COLOR_BUFFER_BIT);
				

				// bind bufA to output of program#2
				gl.bindBuffer(gl.ARRAY_BUFFER, bufA);
				gl.enableVertexAttribArray( aPosLoc );
				gl.vertexAttribPointer(aPosLoc, 4, gl.FLOAT, gl.FALSE, 0, 0)
				
				// run movement calculation code, aka program#2 (calculate movement location and hide the results using RASTERIZER_DISCARD )
				gl.enable(gl.RASTERIZER_DISCARD);
				gl.drawArrays(gl.POINTS, 0, indizes);
				gl.disable(gl.RASTERIZER_DISCARD);
				
				gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, bufB);
				
				
				
				
				 // move dot using rendering code and the position calculated previously which is still stored in bufA
				gl.useProgram( drawProg );
				gl.bindBuffer( gl.ARRAY_BUFFER, bufA );
				gl.enableVertexAttribArray( positionLoc );
				gl.vertexAttribPointer( positionLoc , 4, gl.FLOAT, gl.FALSE, 0, 0);
				gl.drawArrays(gl.POINTS, 0, indizes);
				
				
				
				gl.useProgram( genProg );
				
				// run transforma feedback
				gl.beginTransformFeedback(gl.POINTS);
				gl.drawArrays(gl.POINTS, 0, indizes);
				gl.endTransformFeedback();

				gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, null);

				// switch bufA and bufB in preperation for the next draw call
				var t = bufA;
				bufA = bufB;
				bufB = t;
				
			}
		
		
		
			setInterval( draw , 100 );
<script src="https://twgljs.org/dist/4.x/twgl.min.js"></script>
		<canvas></canvas>


来源：https://stackoverflow.com/questions/61574913/pass-data-between-shader-programs

标签
webgl2
glreadpixels
glteximage2d
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!