Как отобразить 16-битное изображение с расширением sample.dcm в WebGL 2? - PullRequest
1 голос
/ 09 мая 2019

Я пытаюсь отобразить 16-битное изображение DICOM (с расширением .dcm) в WebGL 2.

Я могу просмотреть Di-3d.png с 8 битами, как в коде ниже. Но я не могу загрузить 16-битное изображение с тем же кодом. Для этого мне нужно преобразовать 16-битное изображение в 8 бит.

Как я могу сделать это преобразование?

 <script>
    (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 <a href="https://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">How to get a WebGL 2 implementation</a>';
            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);
        });
    })();
</script>

1 Ответ

0 голосов
/ 10 мая 2019

Вы пытаетесь отобразить изображение DICOM, а не PNG.

Скорее всего, функция loadImage не может понять DICOM, даже если внедренное изображение имеет 8 бит на пиксель.

...