Using ThreeJS to Load a Texture from an ArrayBuffer in JavaScript

Question

Using ThreeJS to Load a Texture from an ArrayBuffer in JavaScript

If I have a JavaScript ArrayBuffer containing binary image data along with the image extension (such as jpg, png, etc), I want to create a ThreeJS Texture without the need for an HTTP request or file load as I already have the binary information.

For example, let's say I have:

var binaryData = getBinaryData(); // This function returns an ArrayBuffer with the image data, assuming it's a PNG image for this example.
var imageFormat = "png";

(As well as other texture properties like wrap mode, mipmaps, etc)

How can I go about loading the Texture in this scenario?

Any assistance on this matter would be greatly appreciated.

javascript three.js textures

Answer 1

Answer №1

To utilize your array of binary data effectively, you can convert it into a base64 string. Once converted, you can then attach it to an Image object and proceed to use the Image object with a Three.js Texture.

// Converting the array of data into a base64 string
var stringData = String.fromCharCode.apply(null, new Uint16Array(jpgData));
var encodedData = window.btoa(stringData);
var dataURI = "data:image/jpeg;base64," + encodedData;

// Linking the image to the Texture
var texture = new THREE.Texture();

var image = new Image();
image.onload = function () {
    texture.image = image;
    texture.needsUpdate = true;
};
image.src = dataURI;

Provided below is the complete code snippet (the low-resolution cat image is deliberately used):

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var jpgData = new Uint8Array([255,216,255,224,0,16,74,70,73,70,0,1,1,0,0,1,0,1,0,0,255,254,0,62,67,82,69,65,84,79,82,58,32,103,100,45,106,112,101,103,32,118,49,46,48,32,40,117,115,105,110,103,32,73,74,71,32,74,80,69,71,32,118,54,50,41,44,32...skipped for brevity..."]);
// The remaining code is skipped for brevity

<html>
<head>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
</body>
</html>

Answer 2

To utilize your array of binary data effectively, you can convert it into a base64 string. Once converted, you can then attach it to an Image object and proceed to use the Image object with a Three.js Texture.

// Converting the array of data into a base64 string
var stringData = String.fromCharCode.apply(null, new Uint16Array(jpgData));
var encodedData = window.btoa(stringData);
var dataURI = "data:image/jpeg;base64," + encodedData;

// Linking the image to the Texture
var texture = new THREE.Texture();

var image = new Image();
image.onload = function () {
    texture.image = image;
    texture.needsUpdate = true;
};
image.src = dataURI;

Provided below is the complete code snippet (the low-resolution cat image is deliberately used):

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var jpgData = new Uint8Array([255,216,255,224,0,16,74,70,73,70,0,1,1,0,0,1,0,1,0,0,255,254,0,62,67,82,69,65,84,79,82,58,32,103,100,45,106,112,101,103,32,118,49,46,48,32,40,117,115,105,110,103,32,73,74,71,32,74,80,69,71,32,118,54,50,41,44,32...skipped for brevity..."]);
// The remaining code is skipped for brevity

<html>
<head>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
</body>
</html>

Answer 3

Answer №2

I have been exploring methods to directly load an arraybuffer to a texture. Presently, we are resorting to creating a local URL as a workaround, using the following code snippet.

const blob = new Blob([arraybuffer]);
let url =  window.URL.createObjectURL(blob);

Answer 4

I have been exploring methods to directly load an arraybuffer to a texture. Presently, we are resorting to creating a local URL as a workaround, using the following code snippet.

const blob = new Blob([arraybuffer]);
let url =  window.URL.createObjectURL(blob);

Using ThreeJS to Load a Texture from an ArrayBuffer in JavaScript

Answer №1

Answer №2

Similar questions

Tips for accessing the value of the range slider in Bootstrap 5 while it is being slid

Tips for choosing elements in JavaScript using querySelector even after they've been included in the code using innerHTML

Oops! Looks like there's an issue with reading the property 'value' of undefined in React-typeahead

Experiencing an issue with Handsontable: Every time I try to run the countRows method, all I get is "undefined."

Tips on implementing a Javascript function triggered by a user's click within the video player frame

Creating a Form Layout with Bootstrap - Organizing Text Boxes and Text Areas

How can I use jQuery to locate all elements that match a specific style within the DOM?

Struggling to successfully submit data from an API to the project's endpoint, encountering Error 405 method rejection

Using JQUERY to handle event bubbling in the DOM after an AJAX call

Using MEAN.JS to Define Query Parameters for Mongo from the Client Controller

Leveraging the power of Auth0 and Prisma in aggregating user data

The battle between Iteration and Recursion: Determining the position of a point in a sequence based

Retrieve JSON information using AJAX

Leveraging Flask to pass data to Google Charts with JavaScript

Building a solid foundation for your project with Node.js and RESTful

Tips for creating nested child routes in AngularJS 2 with ID:

Exploring through a dynamically generated table containing JSON data

how to use jQuery to locate the immediately preceding node that meets specific criteria

Error occurred during npm build with Browserify: Module not found

Are web components capable of managing changes in CSS (maybe through cssChangedCallback)?