Question about textures in different OS

Hello everybody, I’m a begginer in the WebGL coding and I’m having some some trouble trying to understand why I’m having different results when using Windows and Linux(Ubuntu and Fedora).

It’s probably something wrong in the coding that gets interpreted differently in each OS, but I still have no idea what it may be…

(Checked on both OS using Firefox and Google Chrome and had the same results)

Windows Screenshot:

Linux Screenshot:

Thank you in advance!

Can only guess here without having your code and/or any console error messages. Are your textures sized to a power of 2?

Have you tried using the debug context? Debugging - WebGL Public Wiki

Yep, The texture is a .png file with a size of 256/128

This is where I load the textures

function initTexture() {

	texture0 = gl.createTexture();
	texture0.image = new Image();
	texture0.image.onload = function() {
		handleLoadedTexture(texture0)
	}
	texture0.image.src = "images/whiteTexture.gif";

	texture1 = gl.createTexture();
	texture1.image = new Image();
	texture1.image.onload = function() {
		handleLoadedTexture(texture1)
	}
	texture1.image.src = "images/ceilingTexture.jpg";

	texture2 = gl.createTexture();
	texture2.image = new Image();
	texture2.image.onload = function() {
		handleLoadedTexture(texture2)
	}
	texture2.image.src = "images/firefly.png";

	texture3 = gl.createTexture();
	texture3.image = new Image();
	texture3.image.onload = function() {
		handleLoadedTexture(texture3)
	}
	texture3.image.src = "images/whiteTexture.gif";

and here is where everything gets draw:


function drawScene() {

	gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
	gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

	mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 2000.0,
			pMatrix);

	mat4.identity(mvMatrix);

	// set the model-view to opposite camera position
	mat4.rotate(mvMatrix, degToRad(-pitch), [ 1, 0, 0 ]);
	mat4.rotate(mvMatrix, degToRad(-yaw), [ 0, 1, 0 ]);
	mat4.translate(mvMatrix, [ -xPos, -yPos, -zPos ]);

	mvPushMatrix(); // save model-view

	if (texturesToLoad == 0) {

		gl.activeTexture(gl.TEXTURE0);
		gl.bindTexture(gl.TEXTURE_2D, texture0);
		gl.uniform1i(shaderProgram.texture0Uniform, 0);

		
		gl.activeTexture(gl.TEXTURE0 + 1);
		gl.bindTexture(gl.TEXTURE_2D, texture1);
		gl.uniform1i(shaderProgram.texture1Uniform, 1);

		gl.activeTexture(gl.TEXTURE0 + 2);
		gl.bindTexture(gl.TEXTURE_2D, texture2);
		gl.uniform1i(shaderProgram.texture2Uniform, 2);
		gl.drawElements(gl.TRIANGLES, roomVertexIndexBuffer.numItems,
				gl.UNSIGNED_SHORT, 0);
		gl.activeTexture(gl.TEXTURE0 + 3);
		gl.bindTexture(gl.TEXTURE_2D, texture3);
		gl.uniform1i(shaderProgram.texture3Uniform, 3);

		texturesToLoad--;
	}

	// draw the nodes
	gl.bindBuffer(gl.ARRAY_BUFFER, nodeVertexPositionBufferArray);
	gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,
			nodeVertexPositionBufferArray.itemSize, gl.FLOAT, false, 0, 0);

	gl.bindBuffer(gl.ARRAY_BUFFER, nodeVertexColorBufferArray);
	gl.vertexAttribPointer(shaderProgram.vertexColorAttribute,
			nodeVertexColorBufferArray.itemSize, gl.FLOAT, false, 0, 0);

	gl.bindBuffer(gl.ARRAY_BUFFER, nodeVertexTextureCoordsBufferArray);
	gl.vertexAttribPointer(shaderProgram.textureCoordAttribute,
			nodeVertexTextureCoordsBufferArray.itemSize, gl.FLOAT, false, 0, 0);

	gl.bindBuffer(gl.ARRAY_BUFFER, nodeVertexTextureIDsBufferArray);
	gl.vertexAttribPointer(shaderProgram.textureIDAttribute,
			nodeVertexTextureIDsBufferArray.itemSize, gl.FLOAT, false, 0, 0);

	setMatrixUniforms();
	gl.drawArrays(gl.TRIANGLES, 0, nodeVertexPositionBufferArray.numItems);

	// draw the room
	gl.bindBuffer(gl.ARRAY_BUFFER, roomVertexPositionBuffer);
	gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,
			roomVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

	gl.bindBuffer(gl.ARRAY_BUFFER, roomVertexColorBuffer);
	gl.vertexAttribPointer(shaderProgram.vertexColorAttribute,
			roomVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);

	gl.bindBuffer(gl.ARRAY_BUFFER, roomVertexTextureCoordsBuffer);
	gl.vertexAttribPointer(shaderProgram.textureCoordAttribute,
			roomVertexTextureCoordsBuffer.itemSize, gl.FLOAT, false, 0, 0);

	gl.bindBuffer(gl.ARRAY_BUFFER, roomVertexTextureIDsBuffer);
	gl.vertexAttribPointer(shaderProgram.textureIDAttribute,
			roomVertexTextureIDsBuffer.itemSize, gl.FLOAT, false, 0, 0);

	gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, roomVertexIndexBuffer);
	setMatrixUniforms();
	gl.drawElements(gl.TRIANGLES, roomVertexIndexBuffer.numItems,
			gl.UNSIGNED_SHORT, 0);

	mvPopMatrix(); // restore model-view
}


if there is anything else I can post to give it a better idea, please tell me :slight_smile: