Chrome中的3JS glTexImage2D和glFrameBufferTexture2D错误

时间:2014-02-20 07:24:20

标签: google-chrome three.js textures runtime-error volume-rendering

我正在尝试运行我在笔记本电脑上编写的卷渲染程序。我正在使用Intel i7-3517U上的集成图形处理器,而我的笔记本电脑正在运行Kubuntu 12.04。我使用的是Chrome浏览器。

打开显示页面后,没有输出。相反,我在控制台中有以下错误。我不明白如何解决它们。


THREE.WebGLRenderer 56

[.WebGLRenderingContext] GL错误:GL_INVALID_OPERATION:glTexImage2D:< - 来自上一个GL命令的错误--------------------------三。 min.js:385

[.WebGLRenderingContext] GL错误:GL_INVALID_OPERATION:glFramebufferTexture2D:< - 来自上一个GL命令的错误------------------- VolumeRenderer.html:1

[.WebGLRenderingContext] GL错误:GL_INVALID_OPERATION:glTexImage2D:< - 来自上一个GL命令的错误-------------------------- VolumeRenderer。 HTML:1

[.WebGLRenderingContext] GL错误:GL_INVALID_OPERATION:glFramebufferTexture2D:< - 来自之前GL命令的错误-------------------- VolumeRenderer.html:1


代码在Macbook和朋友的Ubuntu PC上产生正确的结果(没有错误),因此问题无论是我的机器,Chrome还是其中任何一种的配置。我已经在chrome:// flags中启用了“覆盖软件渲染列表”。我还在http://get.webgl.org/获得旋转立方体,表明WebGL正在浏览器中运行。如果这是一个显卡(或缺少)问题,有什么办法可以启用必要的功能吗?

这是包含我的着色器的HTML文件,以防它是相关的。还有一个简短的JavaScript文件(下方),其中包含一些基本的3JS代码。

<!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>

以下是为我的程序执行设置和后端处理的JavaScript文件。

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

}

非常感谢任何帮助!

1 个答案:

答案 0 :(得分:0)

问题似乎是我缺乏独立显卡。我想我的集成卡不支持部分或全部纹理操作。