in some browser,CanvasRenderer doesn’t show image when image.width>=4096

Description of the problem

Recently I try to use threejs to show frame animation,to see if it will be more fluency than css frame animation. For phones not support Webgl,CanvasRenderer is used.
I create a PlaneBufferGeometry,and change the texture to animate.
I find that if image.width>=4096,some browsers will not show the texture.
In detail,my chrome on PC(version=53) works well.
Most browsers on Android meet this problem.
In fact,only Samsung S7 and S7 edge work well in my tests.
My tests also include Samsung S6 edge,Nexus 6P,Huawei P9,Huawei P8,Huawei 5X,Meizu MX4Pro.

Maybe it is browser’s problem…

this link use img.width>4096: cr_frame_animation.html
this link uses img.width<4096: cr_frame_animation2.html

and here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>Frame Animation by Three.js</title>
    <script src="lib/three.min.js"></script>
    <script src="lib/stats.min.js"></script>
    <script src="lib/Projector.js"></script>
    <script src="lib/CanvasRenderer.js"></script>
    <style type="text/css">
        html,body{
            margin: 0;
            padding: 0;
        }
        body{
            background-color:#FFFFFF;
        }
        #canvas_div {
            -webkit-tap-highlight-color:rgba(0,0,0,0);
            position: absolute;
            border: none;
            cursor: pointer;
            width: 100%%;
            height: 100%%;
        }
        #three_canvas{
            -webkit-tap-highlight-color:rgba(0,0,0,0);
            position: absolute;
            user-select: none;
            -webkit-user-select: none;
            width: 100%%;
            height: 100%%;
        }
    </style>
</head>
<body>
<div id="canvas_div">
    <canvas id="three_canvas"></canvas>
</div>
<script>
    var renderer;
    var width,height;
    var stat;
    var img=new Image();
    img.src='qqwalking.png'
    function initThree() {
        var devicePixelRatio = window.devicePixelRatio || 1;
        width = document.getElementById('canvas-frame').clientWidth*devicePixelRatio;
        height = document.getElementById('canvas-frame').clientHeight*devicePixelRatio;
        var canvas=document.getElementById('three_canvas');
        renderer = new THREE.CanvasRenderer({
            canvas:canvas
        });
        renderer.setSize(760, height);
        renderer.setClearColor(0xFFFFFF, 1.0);
        canvas.style.width='100%%';
        canvas.style.height='100%%';
    }

    var camera;
    function initCamera() {
        camera = new THREE.OrthographicCamera(width / -2, width / 2, height / 2, height / -2, 1, 1000);
        camera.position.x = 0;
        camera.position.y = 0;
        camera.position.z = 200;
        camera.up.x = 0;
        camera.up.y = 1;
        camera.up.z = 0;
        camera.lookAt({
            x: 0,
            y: 0,
            z: 0
        });
    }
    var scene;
    function initScene() {
        scene = new THREE.Scene();
    }
    function initLight() {
        scene.add(new THREE.AmbientLight(0xffffff));
    }
    var tex;
    function initObject() {
        tex=new THREE.Texture()
        tex.image=img;
        tex.needsUpdate=true;
        tex.repeat.x=1/16;
        tex.repeat.y=1;
        tex.wrapS = tex.wrapT = THREE.RepeatWrapping;
        var material=new THREE.MeshBasicMaterial({
            color:0xaaaaaa,
            map:tex
        });
        var geometry = new THREE.PlaneBufferGeometry( 760, 857 );
        var mesh = new THREE.Mesh( geometry, material );
        scene.add(mesh)
    }
    function move(){
        tex.offset.x += tex.repeat.x;
        if (tex.offset.x >= 1) {
            tex.offset.x = 0;
        }
    }
    function render()
    {
        requestAnimationFrame(render);
        stat.begin();
        move();
        renderer.clear();
        renderer.render(scene, camera);
        stat.end();
    }

    function threeStart() {
        initThree();
        initCamera();
        initScene();
        initLight();
        initObject();
        render();
    }
    function initStats() {
        stat = new Stats();
        stat.domElement.style.position = 'absolute';
        stat.domElement.style.right = '0px';
        stat.domElement.style.top = '0px';
        document.body.appendChild(stat.domElement);
    }
    img.onload=function(){
        initStats();
        threeStart();
    }
</script>
</body>
</html>
Three.js version
  • Dev
  • r80
Browser

Most android default browsers.
Correct : Samsung S7 and S7 edge
Meet this problem : Samsung S6 edge, Nexus 6P, Huawei P9, Huawei P8, Huawei 5X, Meizu MX4Pro

OS
  • All of them
  • Windows
  • Linux
  • Android
  • IOS
Hardware Requirements (graphics card, VR Device, …)

Author: Fantashit

1 thought on “in some browser,CanvasRenderer doesn’t show image when image.width>=4096

Comments are closed.