title: How do I display a 16bit image with sample.dcm extension in WebGL 2?
body: <p>I am trying to display a 16bit DICOM image (with the .dcm extension) in WebGL 2.</p>
  
  <p>I can view a Di-3d.png with 8 bits as in the code below.
  But I can't load a 16-bit image with the same code.
  For this I need to convert the 16-bit image to 8 bits.</p>
  
  <p>How can I make this conversion?</p>
  
  <pre><code> &lt;script&gt;
      (function () {
          'use strict';
  
          var canvas = document.createElement('canvas');
          canvas.width = Math.min(window.innerWidth, window.innerHeight);
          canvas.height = canvas.width;
          document.body.appendChild(canvas);
  
          var gl = canvas.getContext( 'webgl2', { antialias: false } );
          var isWebGL2 = !!gl;
          if(!isWebGL2) {
              document.getElementById('info').innerHTML = 'WebGL 2 is not available.  See &lt;a href="https://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation"&gt;How to get a WebGL 2 implementation&lt;/a&gt;';
              return;
          }
  
          // -- Init program
          var program = createProgram(gl, getShaderSource('vs'), getShaderSource('fs'));
          var mvpLocation = gl.getUniformLocation(program, 'MVP');
          var diffuseLocation = gl.getUniformLocation(program, 'diffuse');
  
          // -- Init buffers: vec2 Position, vec2 Texcoord
          var positions = new Float32Array([
              -1.0, -1.0,
               1.0, -1.0,
               1.0,  1.0,
               1.0,  1.0,
              -1.0,  1.0,
              -1.0, -1.0
          ]);
          var vertexPosBuffer = gl.createBuffer();
          gl.bindBuffer(gl.ARRAY_BUFFER, vertexPosBuffer);
          gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
          gl.bindBuffer(gl.ARRAY_BUFFER, null);
  
          var texCoords = new Float32Array([
              0.0, 1.0,
              1.0, 1.0,
              1.0, 0.0,
              1.0, 0.0,
              0.0, 0.0,
              0.0, 1.0
          ]);
          var vertexTexBuffer = gl.createBuffer();
          gl.bindBuffer(gl.ARRAY_BUFFER, vertexTexBuffer);
          gl.bufferData(gl.ARRAY_BUFFER, texCoords, gl.STATIC_DRAW);
          gl.bindBuffer(gl.ARRAY_BUFFER, null);
  
          // -- Init VertexArray
          var vertexArray = gl.createVertexArray();
          gl.bindVertexArray(vertexArray);
  
          var vertexPosLocation = 0; // set with GLSL layout qualifier
          gl.enableVertexAttribArray(vertexPosLocation);
          gl.bindBuffer(gl.ARRAY_BUFFER, vertexPosBuffer);
          gl.vertexAttribPointer(vertexPosLocation, 2, gl.FLOAT, false, 0, 0);
          gl.bindBuffer(gl.ARRAY_BUFFER, null);
  
          var vertexTexLocation = 4; // set with GLSL layout qualifier
          gl.enableVertexAttribArray(vertexTexLocation);
          gl.bindBuffer(gl.ARRAY_BUFFER, vertexTexBuffer);
          gl.vertexAttribPointer(vertexTexLocation, 2, gl.FLOAT, false, 0, 0);
          gl.bindBuffer(gl.ARRAY_BUFFER, null);
  
          gl.bindVertexArray(null);
  
          loadImage('Di-3d.png', function(image) {
          //loadImage('Anonymized20190509.dcm', function(image) {
              // -- Init Texture
              var texture = gl.createTexture();
              gl.activeTexture(gl.TEXTURE0);
              gl.bindTexture(gl.TEXTURE_2D, texture);
              gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
              gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
              gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
              gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  
              // -- Render
              gl.clearColor(0.0, 0.0, 0.0, 1.0);
              gl.clear(gl.COLOR_BUFFER_BIT);
  
              var matrix = new Float32Array([
                  0.5, 0.0, 0.0, 0.0,
                  0.0, 0.5, 0.0, 0.0,
                  0.0, 0.0, 0.5, 0.0,
                  0.0, 0.0, 0.0, 1.0
              ]);
  
              gl.useProgram(program);
              gl.uniformMatrix4fv(mvpLocation, false, matrix);
              gl.uniform1i(diffuseLocation, 0);
  
              gl.bindVertexArray(vertexArray);
  
              gl.drawArrays(gl.TRIANGLES, 0, 6);
  
              // Delete WebGL resources
              gl.deleteBuffer(vertexPosBuffer);
              gl.deleteBuffer(vertexTexBuffer);
              gl.deleteTexture(texture);
              gl.deleteProgram(program);
              gl.deleteVertexArray(vertexArray);
          });
      })();
  &lt;/script&gt;
  </code></pre>