Live three.js Texture Updating with Photoshop CC

Posted on September 16, 2013 | 3 comments

Live Texture Updating in three.jsCheck out the video below that explains how to live update textures in your three.js application using Adobe Generator for Photoshop CC. The source code for the example shown in the video is available at:

https://github.com/renaun/WorkflowExamples/tree/master/PhotoshopCCGeneratorThreeJS

If you are wondering how I get three.js to update its texture check out this JavaScript code:

/**
 Author: Renaun Erickson @renaun http://renaun.com
 Live three.js Texture Update Plugin

 Meant for development of designing textures in connection with
 Photoshop CC Generator feature.

 You will have to point your assets urls to the folder generated by
 Photoshop CC Generator.

 Usage:
      include renaun.three.ltup.js after three library

      // After you instantiate your threejs renderer add this code
      renderer.addPostPlugin(new RENAUN.LiveTextureUpdatePlugin());
**/
var RENAUN = {
    cacheLiveTextureUpdates: {},
    updateFrameRate: 30
};
   
THREE.ImageUtils.loadTexture = function ( url, mapping, onLoad, onError ) {

    var loader = new THREE.ImageLoader();
    loader.crossOrigin = this.crossOrigin;

    var texture;
    if (!RENAUN.cacheLiveTextureUpdates[url])
    {
        texture = new THREE.Texture( undefined, mapping );
        RENAUN.cacheLiveTextureUpdates[url] = {size: 0, texture: texture, url: url };
    }
    else
    {
        texture = RENAUN.cacheLiveTextureUpdates[url].texture;
    }
   
    var image = loader.load( url, function () {

        texture.needsUpdate = true;

        if ( onLoad ) onLoad( texture );

    } );
    texture.image = image;
    texture.sourceFile = url;

    return texture;
}

RENAUN.LiveTextureUpdatePlugin = function () {
   
    var count = 0;
   
    this.init = function ( renderer ) { }
   
    this.render = function ( scene, camera, viewportWidth, viewportHeight ) {
        count++;
        if (count % RENAUN.updateFrameRate !== 0)
            return;
        for (var key in RENAUN.cacheLiveTextureUpdates)
        {
            THREE.ImageUtils.loadTexture(key);  
        }
        if (count > 300000000)
            count = 0;
    }
}

To use the live texture update plugin all you need to do in your three.js application is add this:

var renderer = new THREE.WebGLRenderer();
      renderer.addPostPlugin(new RENAUN.LiveTextureUpdatePlugin()); // Added for Live Texture Updates

The constant updating of the actual texture comes from the Adobe Generator for Photoshop CC. The new “Image Assets” generator plugin constant updates Photoshop folders or layers with a .jpg/.png suffix. If you want to learn about creating your own Photoshop CC generator plugins here are some links:

Intro to Photoshop Generator by Lee Brimelow
Script your first Adobe Generator Plugin

Share the post "Live three.js Texture Updating with Photoshop CC"

  • Ross

    This is great, nice work Renaun! A direct link to/from Photoshop would be a great feature for Verold Studio (http://studio.verold.com)… one of the common use-cases is giving feedback on diffuse or specular textures, and being able to update and see the results on your model in real-time would be awesome! Will investigate further when I get some cycles, looks very promising.

  • makc

    Ha, nice idea to pump textures in all the time :) Obliged to point out that with http://codeorchestra.com/ livecoding tool you would only get updates when files actually change: http://www.youtube.com/watch?v=jJG-yIn6dqM&hd=1

    • renaun

      Yeah this was quick and easy way to do it with out a more complicated setup. Would be easy enough to setup a node app to check if files have changed and then have that tell the client so it could update. Just more code then I wanted to for a quick demo.

  • Pingback: Live Texture Updater Plugin for Photoshop CC - Renaun Erickson | Renaun Erickson