Thursday, 8 June 2017

Transmit an image from server to client with socket.io, and use it as texture in Three.js

I have a program running on a server that computes images, that I need to get in a ThreeJS application (running in the user's browser) to use as texture.

Current implementation: The server on which the images are computed also hosts a (Node) socket.io server. When the image is computed, the Node server sends to the socket.io client in the ThreeJS application a path to the image, and the ThreeJS application updates the texture of the object using the image in the path. It works but it's very slow and quite unstable (sometime images don't load).

Question: I found existing threads about converting an image to base64, transmitting it through socket.io and unpacking it on the client. Is it possible for the socket.io client to pass the image to the ThreeJS application such that it can use it as a texture ? Or is there an even better way to do this?

All help and pointers appreciated !

Ps: here is the current implementation in the Three.js application:

socket.on('image_path', function(data) {
    console.log("path recieved: " + data);
    texturePath = "images/" + data;
    caustic_texture = textureLoader.load(texturePath);
    caustic_material.map = caustic_texture;
});



via Zick

No comments:

Post a Comment