Why does larger texture render faster in webgl? - three.js

Question

Run the following jsfiddle code with size = 256, we got ~60ms/frame performance. While setting size = 1024, we got ~10ms/frame. Does anyone know why is a larger sized texture renders faster in this case?
Here is the jsfiddle link: https://jsfiddle.net/weilun/bfchn7yv/11/, check console log for printed timing info.
var width = window.innerWidth, height = window.innerHeight;
var size = 1024; // use these we got 60ms / frame, while use 1024 we got 10ms / frame
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
var camera, scene, renderer, geometry, texture, mesh;
function changeCanvas() {
ctx.font = '20pt Arial';
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'white';
ctx.fillRect(10, 10, canvas.width - 20, canvas.height - 20);
ctx.fillStyle = 'black';
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(new Date().getTime(), canvas.width / 2, canvas.height / 2);
}
function init() {
renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(70, width / height, 1, 1000);
camera.position.z = 500;
scene.add(camera);
texture = new THREE.Texture(canvas);
var material = new THREE.MeshBasicMaterial({ map: texture });
geometry = new THREE.CubeGeometry( 200, 200, 200 );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
canvas.width = canvas.height = size;
document.body.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
var s = performance.now()
mesh.rotation.y += 0.01;
for (var i=0; i<100; i++) {
changeCanvas();
texture.needsUpdate = true;
renderer.render(scene, camera);
}
console.log('total: ', performance.now() - s)
}
init();
animate();
I'm trying to do some optimizations on another project by switching to smaller textures, but it actually made it worse :-(

Answer 1

Remove the for loop in the animate function.
I can see no use for it and it is generating, applying the texture and rendering the scene 100 times per frame.
function animate() {
requestAnimationFrame(animate);
var s = performance.now()
mesh.rotation.y += 0.01;
for (var i=0; i<100; i++) { <----remove this line
changeCanvas();
texture.needsUpdate = true;
renderer.render(scene, camera);
} <-----and this line
console.log('total: ', performance.now() - s)
}