3JS glTexImage2D and glFrameBufferTexture2D errors in Chrome

StackOverflow https://stackoverflow.com/questions/21900935

سؤال

I am attempting to run a volume rendering program that I wrote on my laptop. I am using the integrated graphics processor on the Intel i7-3517U, and my laptop is running Kubuntu 12.04. I am using the Chrome browser.

After opening the display page, there is no output. Instead, I have the following errors in the console. I do not understand how I can fix them.

THREE.WebGLRenderer 56

[.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : glTexImage2D: <- error from previous GL command--------------------------three.min.js:385

[.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : glFramebufferTexture2D: <- error from previous GL command-------------------VolumeRenderer.html:1

[.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : glTexImage2D: <- error from previous GL command--------------------------VolumeRenderer.html:1

[.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : glFramebufferTexture2D: <- error from previous GL command--------------------VolumeRenderer.html:1

The code produces correct results (no errors) on a Macbook and the Ubuntu PC of a friend, among others, so the problem is certainly either my machine, Chrome, or the configuration of either. I have already enabled "Override software rendering list" in chrome://flags. I also get the spinning cube at http://get.webgl.org/, indicating that WebGL is working in my browser. If this is a graphics card (or lack thereof) issue, is there any way that I can enable the necessary features?

This is the HTML file containing my shaders, just in case it is relevant. There is also a short JavaScript file (beneath) which houses some basic 3JS code.

<!DOCTYPE html>
<html>
    <head></head>
<body style="overflow:auto; margin:0; padding:0;">
    <div id="container" onclick="this.focus();"></div>
    <div id="grading"></div>
</body>
    <script type="text/javascript" src="lib/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="lib/three.min.js"></script>
    <script type="text/javascript" src="lib/Coordinates.js"></script>
    <script type="text/javascript" src="lib/stats.min.js"></script>
    <script type="text/javascript" src="lib/dat.gui.min.js"></script>
    <script src="lib/OrbitControls.js"></script>

    <!-- Vertex Shader -->
    <script id="vertex" type="x-shader/x-vertex">
        varying vec4 vPosition;

    void main() {
        gl_Position = projectionMatrix * modelViewMatrix * vec4( position * 200.0, 1.0 );
        vPosition = vec4(position.xyz + vec3(0.5), 1.0);
    }

    </script>

    <!--Fragment Shader-->
    <script type="text/x-glsl" id="fragment">
        varying vec4 vPosition;

    uniform float range;
    uniform float min;
    uniform float toScreen;
    uniform float screenWidth;
    uniform float screenHeight;
    uniform sampler2D backTexture;

    float Bc2(float temp, float eps);
    float Tc(float field, float eps);
    float S(float eps);
    float Lc(float t, float b, float eps);
    vec3 denormalize(vec3 curLocation);

    void main() {           
        if(toScreen == 1.0){
            vec3 blue = vec3(0.0, 0.0, 1.0);
            vec3 red = vec3(1.0, 0.0, 0.0);

            float x_norm = (gl_FragCoord.x) / screenWidth;
            float y_norm = (gl_FragCoord.y) / screenHeight;

            vec4 backPosition = texture2D( backTexture, vec2(x_norm, y_norm) );
            vec3 ray = vec3(-vPosition.xyz + backPosition.xyz);

            float sum = 0.0;
            float stepDist = 0.0005;
            vec3 step = stepDist * normalize(ray);
            float maxSteps = 1.73/stepDist;

            //gl_FragColor = vec4(vec3(length(ray) / 1.73), 1.0);
            //return;
            gl_FragColor = vec4(vec3(0.0), 0.0);

            for(float i = 0.0; i < 100000.0; i += 1.0){     
                vec3 curLocation = vPosition.xyz + step*i;

                vec3 variables = denormalize(curLocation);

                //gl_FragColor = vec4((variables.x - 4.0)/13.0, variables.y/30.0, (variables.z + 0.1) / 0.15, 1.0);
                //gl_FragColor = vec4(curLocation, 1.0);
                //break;

                float ic = Lc(variables.x, variables.y, variables.z)/ range;
                if(ic < 0.0)ic = 0.0;

                vec4 color = vec4(mix(blue, red, ic), ic);

                color.xyz = color.xyz * color.a;

                gl_FragColor += (1.0 - gl_FragColor.a) * color;

                if(length(curLocation - vPosition.xyz) >= length(ray)){
                break;
                }
            }
            //gl_FragColor = vec4(vec3(maxSteps)/(1.73/0.01), 1.0);
            //gl_FragColor = vec4(vec3(length(ray))/1.73, 1.0);
        }else{
            gl_FragColor = vPosition;
        }
    }

    vec3 denormalize(vec3 curLocation){
        vec3 denorm = vec3(0.0);

        denorm.x = (13.0 * curLocation.x) + 4.0;
        denorm.y =  30.0 * curLocation.y;
        denorm.z = (.015 * curLocation.z)-.01;

        return denorm;
        }

    float Bc2(float temp, float eps){
            return 32.57 * S(eps) * (1.0 - pow(temp/Tc(0.0, eps), 1.52));
    }

    float Tc(float field, float eps){
            return 17.17 * (pow(S(eps), 1.0/3.0)) * (pow((1.0 - (field/32.57)), (1.0/1.52)));
    }

    float S(float eps){
        float Epssh = 8.0 * 0.00970 / sqrt(53.0 * 53.0 - 8.0 * 8.0);
        return 1.0 + (1.0/(1.0 - 53.0 * 0.0097)) * (53.0 * (sqrt(Epssh * Epssh + 0.0097 * 0.0097) - sqrt((eps- Epssh) * (eps - Epssh) + 0.0097 * 0.0097)) - (8.0 * eps));
    }

    float Lc(float t, float b, float eps){
        float B = b/Bc2(t, eps);
        float T = t/Tc(0.0, eps);
        if(b>0.0 && B>=0.0 && B<=1.0 && T>=0.0 && T<=1.0){
            return 1.89 * pow(10.0, 4.0) / b * S(eps) * (1.0 - pow(T, 1.52)) * (1.0 - T * T) * (pow(B, 0.62)) * (pow((1.0 - B), 2.125));
        } else {
            return 0.0;
        }
    }
    </script>

    <!--Scene Setup-->
    <script type="text/javascript" src="VolumeRenderer.js"></script>
</html>

The following is the JavaScript file doing the setup and back-end processing for my program.

var camera, scene, renderer;
var mesh;
var rtTexture;
var material;

init();
animate();

function Bc2(temp, eps){
    return 32.57 * S(eps) * (1.0 - Math.pow(temp/Tc(0.0, eps), 1.52));
}

function Tc(field, eps){
    return 17.17 * (Math.pow(S(eps), 1.0/3.0)) * (Math.pow((1.0 - (field/32.57)), (1.0/1.52)));
}

function S(eps){
    var Epssh = 8.0 * 0.00970 / Math.sqrt(53.0 * 53.0 - 8.0 * 8.0);
    return 1.0 + (1.0/(1.0 - 53.0 * 0.0097)) * (53.0 * (Math.sqrt(Epssh * Epssh + 0.0097 * 0.0097) - Math.sqrt((eps- Epssh) * (eps - Epssh) + 0.0097 * 0.0097)) - (8.0 * eps));
}

function Lc(t, b, eps){
    return 1.89 * Math.pow(10.0, 4.0) / b * S(eps) * (1.0 - Math.pow(t/Tc(0.0, eps), 1.52)) * (1.0 - t/Tc(0.0, eps) * t/Tc(0.0, eps)) * (Math.pow(b/Bc2(t, eps), 0.62)) * (Math.pow((1.0 - b/Bc2(t, eps)), 2.125));
}

function init() {
    var min = null;
    var max = null;
    for(var b = 0; b < 30; b = b + 0.1){
            for(var t = 4; t < 17; t = t + 0.1){
                    for(var eps = -0.01; eps < 0.005; eps = eps + 0.005){
                            var lc = Lc(t, b, eps);
                            if(!isNaN(lc)){
                                    if(min == null || lc < min){
                                            min = lc;
                                    }
                                    if(max == null || lc > max){
                                            max = lc
                                }
                        }
                }
        }
    }
    var range = max - min;

    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    //renderer.setFaceCulling( THREE.CullFaceFront );
    //renderer.setClearColorHex( 0xcccccc, 1 );

    document.body.appendChild( renderer.domElement );

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.z = 400;

    cameraControls = new THREE.OrbitControls(camera);
    cameraControls.addEventListener( 'change', render );

    rtTexture = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.NearestFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat} );

    scene = new THREE.Scene();
    // LIGHTS
    var ambientLight = new THREE.AmbientLight( 0x222222 );

    var light2 = new THREE.DirectionalLight( 0xffffff, 1.0 );
    light2.position.set( -500, 250, -200 );

    scene.add(ambientLight);

    var geometry = new THREE.CubeGeometry(1, 1, 1);

    material = createShaderMaterial("shader", range, min );

    mesh = new THREE.Mesh( geometry, material );
    mesh.updateMatrix();
    mesh.matrixAutoUpdate = false;
    scene.add( mesh );

    window.addEventListener( 'resize', onWindowResize, false );

}

function loadShader(shadertype) {
    return document.getElementById(shadertype).textContent;
}

function createShaderMaterial(id, range, min) {
    var shaderTypes = {

        'shader' : {

            uniforms: {
                "backTexture" : { type: "t", value: rtTexture },
                "range" : { type: "f", value: range},
                "min" : { type: "f", value: min},
                "toScreen":  { type: "f", value: 1.0 },
                "screenWidth":  { type: "f", value: window.innerWidth},
                "screenHeight":  { type: "f", value: window.innerHeight},
        }
    }

    };

    var shader = shaderTypes[id];

    var u = THREE.UniformsUtils.clone(shader.uniforms);

    // this line will load a shader that has an id of "vertex" from the .html file
    var vs = loadShader("vertex");
    // this line will load a shader that has an id of "fragment" from the .html file
    var fs = loadShader("fragment");

    var material = new THREE.ShaderMaterial({ uniforms: u, vertexShader: vs, fragmentShader: fs });

    return material;
}

function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

}

function render() {
    renderer.render(scene, camera);
}

function animate() {

    requestAnimationFrame( animate );
    cameraControls.update();

    material.uniforms.toScreen.value = 0.0;
    renderer.setFaceCulling( THREE.CullFaceFront );
    renderer.render( scene, camera, rtTexture, true );

    material.uniforms.toScreen.value = 1.0;
    renderer.setFaceCulling( THREE.CullFaceBack, false);
    renderer.render( scene, camera );

}

Any help would be greatly appreciated!

هل كانت مفيدة؟

المحلول

The issue appeared to be my lack of an discrete graphics card. I guess some or all texture operations are not supported by my integrated card.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top