[Public WebGL] MIP rendering in WebGL (integration of EXT_blend_minmax)

Gregg Tavares (社用) [email protected]
Wed Dec 12 19:55:14 PST 2012


Is there some other way to achieve the same thing? Lots of stuff in left
out of ES and WebGL can be achieved by creative use of shaders.

One example: ES 2 only has CLAMP_TO_EDGE but no CLAMP_TO_BORDER but you can
make clamp to border with

    vec4 clampToBorder(sampler2D texture, vec2 texcoord, vec4 borerColor) {
      return (texcoord.x < 0.0 || texcoord.y < 0.0 || texcoord.x > 1.0 ||
texcoord.y > 1.0) ?
        borderColor : texture2D(texture, texcoord);
    }

For maximum intensity projection it seems like you'd just make 2 textures,
2 fbos, ping pong between them and your new plane of data and make your
shader keep the max

   --fragment-shader--
  uniform sampler2D u_texture0;
  uniform sampler2D u_texture1;
  uniform vec2 u_texcoord;

  void main() {
     vec4 color0 = texture2D(u_texture0, u_texcoord);
     vec4 color1 = texture2D(u_texture1, u_texcoord);
     g_FragColor = max(color0, color1);
  }


Your code would look something like

  --init time--

  // create 2 textures and attach them to framebuffers.
  var textures = [];
  var framebuffers = [];
  for (var ii = 0; ii < 2; ++ii) {
    var texture = createAndSetupTexture(gl);
    textures.push(texture);

    // make the texture the same size as the planes
    gl.texImage2D(
        gl.TEXTURE_2D, 0, gl.RGBA, planeWidth, planeHeight, 0,
        gl.RGBA, gl.UNSIGNED_BYTE, null);

    // Create a framebuffer
    var fbo = gl.createFramebuffer();
    framebuffers.push(fbo);
    gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);

    // Attach a texture to it.
    gl.framebufferTexture2D(
        gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
  }



  --draw time--

  // set the viewport to match the framebuffers.
  gl.viewport(0, 0, planeWidth, planeHeight);

  // loop through each effect we want to apply.
  for (var ii = 0; ii < planes.length; ++ii) {
    // bind the next plane
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, plane[ii]);

    // Setup to draw into one of the framebuffers.
    gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffers[ii % 2]);

    // clear the first texture.
    if (ii = 0) {
      gl.clear(gl.COLOR_BUFFER_BIT);
    }

    // For the next draw, use the texture we just rendered to.
    gl.activeTexture(gl.TEXTURE1)
    gl.bindTexture(gl.TEXTURE_2D, textures[ii % 2]);

    // draw a quad
    gl.drawArrays(...)
  }

   // Finally draw the last texture used to the canvas.
   gl.bindFramebuffer(gl.FRAMEBUFFER, null);
   gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
   gl.activeTexture(gl.TEXTURE0);
   gl.bindTexture(gl.TEXTURE_2D, textures[plans.length % 2]);
   gl.drawArrays(...);






On Thu, Dec 13, 2012 at 3:42 AM, Florian Bösch <[email protected]> wrote:

> Also specified in:
>
>    - OpenGL ES 3.0 (2012):
>    http://www.khronos.org/registry/gles/specs/3.0/es_spec_3.0.0.pdf
>    - OpenGL 2.0 (2004) :
>    http://www.opengl.org/registry/doc/glspec20.20041022.pdf
>
>
>
> On Wed, Dec 12, 2012 at 7:22 PM, Florian Bösch <[email protected]> wrote:
>
>> Specified In:
>>
>>    - OpenGL Extension EXT_blend_minmax. Initially introduced 1995 by
>>    SGI, modified 2009 for ES.
>>    http://www.opengl.org/registry/specs/EXT/blend_minmax.txt
>>    - OpenGL ES EXT_blend_minmax. Introduced 2009:
>>    http://www.khronos.org/registry/gles/extensions/EXT/blend_minmax.txt
>>    - Direct3D: D3DBLENDOP_MIN/MAX, Released with Direct3D 9.0 in 2002
>>
>> Hardware Availability:
>>
>>    - Desktop D3D: 99.45% (Not being DX8 GPUs or below) source:
>>    http://store.steampowered.com/hwsurvey
>>    - Desktop OpenGL: 98%, source:
>>    http://feedback.wildfiregames.com/report/opengl/
>>    - Mobiles: As of November 2012, 228 devices out of 783, source:
>>    http://www.glbenchmark.com/result.jsp
>>
>>
>> Proposal Extension: https://github.com/KhronosGroup/WebGL/pull/109
>>
>>
>> On Wed, Dec 12, 2012 at 5:58 PM, Sébastien Jodogne <[email protected]>wrote:
>>
>>> Dear all,
>>>
>>> I am the main developer of the Orthanc open-source software, that is an
>>> open-source server for storing medical images [1]. We currently plan to
>>> extend Orthanc so as to propose a Web-based interface for displaying 2D/3D
>>> images according to medical standards. Obviously, this would be a huge step
>>> toward the adoption of WebGL in scientific applications.
>>>
>>> Unfortunately, medical/scientific visualization requires native support
>>> for MIP rendering (Maximum Intensity Projection) in WebGL [2]. Currently,
>>> it seems that only the FUNC_ADD, FUND_SUBTRACT and FUNC_REVERSE_SUBTRACT
>>> blending equations are supported in OpenGL ES [3]. However, the extension
>>> "EXT_blend_minmax" currently brings MIP rendering to OpenGL ES [4], but not
>>> (yet) to WebGL.
>>>
>>> I am therefore convinced that porting the "EXT_blend_minmax" inside
>>> WebGL would be of major interest for the adoption of WebGL, both in medical
>>> and scientific applications.
>>>
>>> How is it possible to suggest to the Khronos group to integrate this
>>> extension inside WebGL? Should we contact Firefox developers?
>>>
>>> Thanks in advance for your help,
>>> S. Jodogne-
>>>
>>>
>>> [1] https://code.google.com/p/orthanc/
>>> [2] http://en.wikipedia.org/wiki/Maximum_intensity_projection
>>> [3]
>>> http://www.khronos.org/opengles/sdk/docs/man/xhtml/glBlendEquation.xml
>>> [4] http://www.opengl.org/registry/specs/EXT/blend_minmax.txt
>>>
>>>
>>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://khronos.org/pipermail/public_webgl_khronos.org/attachments/20121213/c7a8de30/attachment.html>


More information about the public_webgl mailing list