<p dir="auto">When using the Image Bitmap Loader to load in images for sprites the images render upside down. It should be noted that if the image downloaded is not the correct power of 2 and the resizer is fired the images appear the right way up but if they images are the correct power of 2 and the resizer is not called they appear upside down;</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="let material = new THREE.SpriteMaterial();
let sprite = new THREE.Sprite( material );
sprite.scale.set(5, 5, 5);
sprite.position.copy(props.position);
sprite.userData = props.userData;
scene.add(sprite);
new THREE.ImageBitmapLoader().load( props.imageUrl,  (imageBitmap) =&gt; {
	let texture = new THREE.CanvasTexture( imageBitmap );
	material = new THREE.SpriteMaterial( { map: texture } );
	sprite.material = material;
	sprite.scale.set(5, 5, 5);
       }, undefined, function (err) {
	     console.error(&quot;Error loading image&quot;, err)
} );"><pre class="notranslate"><span class="pl-k">let</span> <span class="pl-s1">material</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">SpriteMaterial</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">let</span> <span class="pl-s1">sprite</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">Sprite</span><span class="pl-kos">(</span> <span class="pl-s1">material</span> <span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">sprite</span><span class="pl-kos">.</span><span class="pl-c1">scale</span><span class="pl-kos">.</span><span class="pl-en">set</span><span class="pl-kos">(</span><span class="pl-c1">5</span><span class="pl-kos">,</span> <span class="pl-c1">5</span><span class="pl-kos">,</span> <span class="pl-c1">5</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">sprite</span><span class="pl-kos">.</span><span class="pl-c1">position</span><span class="pl-kos">.</span><span class="pl-en">copy</span><span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">position</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">sprite</span><span class="pl-kos">.</span><span class="pl-c1">userData</span> <span class="pl-c1">=</span> <span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">userData</span><span class="pl-kos">;</span>
<span class="pl-s1">scene</span><span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span><span class="pl-s1">sprite</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">ImageBitmapLoader</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">load</span><span class="pl-kos">(</span> <span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">imageUrl</span><span class="pl-kos">,</span>  <span class="pl-kos">(</span><span class="pl-s1">imageBitmap</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
	<span class="pl-k">let</span> <span class="pl-s1">texture</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">CanvasTexture</span><span class="pl-kos">(</span> <span class="pl-s1">imageBitmap</span> <span class="pl-kos">)</span><span class="pl-kos">;</span>
	<span class="pl-s1">material</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">SpriteMaterial</span><span class="pl-kos">(</span> <span class="pl-kos">{</span> <span class="pl-c1">map</span>: <span class="pl-s1">texture</span> <span class="pl-kos">}</span> <span class="pl-kos">)</span><span class="pl-kos">;</span>
	<span class="pl-s1">sprite</span><span class="pl-kos">.</span><span class="pl-c1">material</span> <span class="pl-c1">=</span> <span class="pl-s1">material</span><span class="pl-kos">;</span>
	<span class="pl-s1">sprite</span><span class="pl-kos">.</span><span class="pl-c1">scale</span><span class="pl-kos">.</span><span class="pl-en">set</span><span class="pl-kos">(</span><span class="pl-c1">5</span><span class="pl-kos">,</span> <span class="pl-c1">5</span><span class="pl-kos">,</span> <span class="pl-c1">5</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
       <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">undefined</span><span class="pl-kos">,</span> <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">err</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
	     <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">error</span><span class="pl-kos">(</span><span class="pl-s">"Error loading image"</span><span class="pl-kos">,</span> <span class="pl-s1">err</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span> <span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<h5 dir="auto">Three.js version</h5>
<ul dir="auto">
<li>[x ] r107</li>
</ul>
<h5 dir="auto">Browser</h5>
<ul class="contains-task-list">
<li>[] All of them</li>
<li>[x ] Chrome</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Firefox</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Internet Explorer</li>
</ul>
<h5 dir="auto">OS</h5>
<ul class="contains-task-list">
<li>[] All of them</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Windows</li>
<li>[ x] macOS</li>
<li>[ x] Linux</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Android</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> iOS<br>
Havent tested on the others</li>
</ul>
<h5 dir="auto">Description of the problem</h5>
<p dir="auto">Non POT <code class="notranslate">ImageBitmap</code> texture can be upside down.</p>
<p dir="auto">Demo: <a href="https://jsfiddle.net/7do6um2f/" rel="nofollow">https://jsfiddle.net/7do6um2f/</a> (Use Chrome)</p>
<p dir="auto">Non POT image can be resized to POT <code class="notranslate">canvas</code> in <code class="notranslate">WebGLRenderer(WebGLTexture)</code>. If original image is <code class="notranslate">ImageBitmap</code> and <code class="notranslate">texture.flipY</code> is <code class="notranslate">true</code>, <code class="notranslate">texture</code> will be upside down.</p>
<p dir="auto">This is from the difference of <code class="notranslate">ImageBitmap</code> API from others. <code class="notranslate">ImageBitmap</code> requires <code class="notranslate">flipY</code> on bitmap creation while others requires on uploading data to GPU (= <code class="notranslate">texture.flipY</code>).</p>
<p dir="auto"><code class="notranslate">texture.flipY</code> used on uploading data to GPU is ignored for <code class="notranslate">ImageBItmap</code>. But if non POT <code class="notranslate">ImageBitmap</code> is converted to <code class="notranslate">canvas</code>, <code class="notranslate">texture.flipY</code> will have an effect. So texture will be upside down.</p>
<p dir="auto"><code class="notranslate">texture.flipY</code> has no effect for <code class="notranslate">ImageBitmap</code> so we should force it to <code class="notranslate">false</code> if texture's image is <code class="notranslate">ImageBitmap</code>?</p>
<p dir="auto">API difference has another issue. (May be it isn't so serious tho.) <code class="notranslate">FlipY</code> and <code class="notranslate">premultiplyAlpha</code> is required on bitmap creation. <code class="notranslate">texture.flipY/premultiplyAlpha</code> used on uploading data to GPU are ignored for <code class="notranslate">ImageBitmap</code>.</p>
<p dir="auto">So the following code has no effect for <code class="notranslate">ImageBitmap</code>, but the code has effect if <code class="notranslate">ImageBitmap</code> is resized and converted to <code class="notranslate">canvas</code>.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="texture.premultiplyAlpha = ! texture.premultiplyAlpha;
texture.flipY = ! texture.flipY;
texture.needsUpdate = true;"><pre class="notranslate"><code class="notranslate">texture.premultiplyAlpha = ! texture.premultiplyAlpha;
texture.flipY = ! texture.flipY;
texture.needsUpdate = true;
</code></pre></div>
<h5 dir="auto">Three.js version</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Dev</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> r103</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> ...</li>
</ul>
<h5 dir="auto">Browser</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> All of them</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Chrome</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Firefox</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Internet Explorer</li>
</ul>
<h5 dir="auto">OS</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> All of them</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Windows</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> macOS</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Linux</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Android</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> iOS</li>
</ul>
<h5 dir="auto">Hardware Requirements (graphics card, VR Device, ...)</h5>