[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

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

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

  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);

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

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

    // Attach a texture to it.
        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.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) {

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

    // draw a quad

   // 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.bindTexture(gl.TEXTURE_2D, textures[plans.length % 2]);

On Thu, Dec 13, 2012 at 3:42 AM, Florian Bösch <pyalot@gmail.com> wrote:
Also specified in:

On Wed, Dec 12, 2012 at 7:22 PM, Florian Bösch <pyalot@gmail.com> wrote:
Specified In:
Hardware Availability:

Proposal Extension: https://github.com/KhronosGroup/WebGL/pull/109

On Wed, Dec 12, 2012 at 5:58 PM, Sébastien Jodogne <s.jodogne@gmail.com> 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-