WebGL: INVALID_VALUE: texImage2D: no canvas in three.js - three.js

Question

I followed a procedural planet example from https://github.com/brunosimon/lab/blob/master/experiments/procedural-planet/index.html, the original three.js version is old.
The general idea of the code is simple, firstly generate a facted sphere from six box geometries, and then generate six textures from the gradient canvas, at last generate the material from these generated textures.
the main code about generating material
function generate_material()
{
var maps = generate_maps();
//console.log(maps.textures);
var materials = [];
// Each face
for( var i = 0; i < 6; i++ )
materials.push( get_shader_material( maps.textures[ i ], maps.bumps[ i ] ) );
//materials.push( new THREE.MeshBasicMaterial({map: makeCanvasTexture()}) );
return materials;
}
function generate_maps ()
{
var textures = [],
bumps = [],
materials = [],
resolution = 1024;
// Each face
for(var i = 0; i < 6; i++)
{
var texture = new THREE.WebGLRenderTarget( resolution, resolution, { minFilter : THREE.LinearFilter, magFilter : THREE.LinearFilter, format : THREE.RGBFormat } ),
texture_camera = new THREE.OrthographicCamera( - resolution / 2, resolution / 2, resolution / 2, - resolution / 2, -100, 100 ),
texture_scene = new THREE.Scene(),
geometry = new THREE.PlaneBufferGeometry( resolution, resolution ),
material = new get_texture_shader_material( i, seed, options.clouds.distortion ),
plane = new THREE.Mesh( geometry,material);
materials.push( material );
texture_camera.position.z = 10;
plane.position.z = - 10;
texture_scene.add(plane);
renderer.render( texture_scene, texture_camera );
/**/
// Retrieve buffer
var buffer = new Uint8Array( resolution * resolution * 4 ),
gl = renderer.getContext();
gl.readPixels( 0, 0, resolution, resolution, gl.RGBA, gl.UNSIGNED_BYTE, buffer );
textures.push( texture );
bumps.push( {
image :
{
data : buffer,
height : resolution,
width : resolution
}
} );
}
// Return
return {
textures : textures,
bumps : bumps,
smaterials : materials,
};
}
function get_shader_material ( texture_map, bump_map )
{ //
var vertexShader = document.getElementById( 'planet-vertex-shader' ).textContent,
fragmentShader = document.getElementById( 'planet-fragment-shader' ).textContent,
uniforms = generate_uniforms( texture_map );
if(textures.water){
}else{
console.log('no water')
}
uniforms.tWaterGradient =
{
type : 't',
value : textures.water.texture
};
uniforms.tGroundGradient =
{
type : 't',
value : textures.ground.texture
};
uniforms.tIceGradient =
{
type : 't',
value : textures.ice.texture
};
return new THREE.ShaderMaterial( {
uniforms : uniforms,
vertexShader : vertexShader,
fragmentShader : fragmentShader,
transparent : true
} );
}
function get_texture_shader_material ( index, seed, clouds_distortion )
{
var vertexShader = document.getElementById( 'planet-texture-vertex-shader' ).textContent,
fragmentShader = document.getElementById( 'planet-texture-fragment-shader' ).textContent,
uniforms =
{
index :
{
type : 'i',
value : index
},
fCloudsDistortion :
{
type : 'f',
value : clouds_distortion
},
v3Seed :
{
type : 'v3',
value : seed
}
};
return new THREE.ShaderMaterial( {
uniforms : uniforms,
vertexShader : vertexShader,
fragmentShader : fragmentShader,
transparent : true,
depthWrite : false
} );
}
I reused most of the code however got some problem with the material part, the code example I made is seen here - https://jsfiddle.net/ufjqcht6/86/
three.module.js?3179:19902 WebGL: INVALID_VALUE: texImage2D: no canvas
texImage2D # three.module.js?3179:19902
GL ERROR :GL_INVALID_OPERATION : glGenerateMipmap: Can not generate mips ERROR GL_INVALID_OPERATION : glGenerateMipmap: Can not generate mips
RENDER WARNING: texture bound to texture unit 1 is not renderable. It might be non-power-of-2 or have incompatible texture filtering (maybe)?
RENDER WARNING: texture bound to texture unit 2 is not renderable. It might be non-power-of-2 or have incompatible texture filtering (maybe)?
the code example can be seen here, where the issues can be only seen from the chrome 's developer 's console.
I debugged the code but I can't identify whether the problem coming from the shader's code or the js's code ? and how to solve it

Answer 1

I debugged the code but I can't identify whether the problem coming from the shader's code or the js's code ?
The problem is the way you are using Object.assign() in your code. For the second and third texture, you overwrite the style property so it does not has a definition for width and height anymore. Gradient_Texture.init() will then assign undefined to the canvas's dimensions which results in the respective WebGL error.
Fixing the Object.assign() statements solves the issue: https://jsfiddle.net/L21jz07k/