我正在尝试运行我在笔记本电脑上编写的体积渲染程序。我使用的是英特尔i7-3517U上的集成图形处理器，我的笔记本电脑运行的是Kubuntu 12.04。我正在使用Chrome浏览器。
打开显示页面后，没有输出。相反，我在控制台中出现了以下错误。我不明白怎样才能把它们修好。
THREE.WebGLRenderer56
[.WebGLRenderingContext]GL错误：GL_INVALID_OPERATION:glTexImage2D:<-上一个GL命令中的错误-------------------------three.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 );
}
如有任何帮助，我们将不胜感激！
问题似乎是我缺少离散显卡。我想我的集成卡不支持某些或所有纹理操作。