Posted by: Morten Nobel-Jørgensen | July 24, 2011

Creating a WebGL export plugin for SoftImage 2011

The cool thing about programs like Autodesk Softimage is they allow programmers to extend their functionality through plugins. In this blog, I’ll explain how Vaida Laganeckiene and I created WebGL exporter plugin written in C++ for SoftImage 2011.

Getting started

To create SoftImage plugins, you first need to setup a environment variable. Add the environment variable XSISDK_ROOT with the value ‘C:\Program Files\Autodesk\Softimage 2011\XSISDK‘ (or where ever SoftImage XSISDK is installed).

We used Visual Studio 2010 for compiling the projects. To get started we took one of the example plugins located in C:\Program Files\Autodesk\Softimage 2011\XSISDK\examples\workgroup . This way we had a plugin-project up and running from the beginning, and we didn’t spend time on compiler and linker configuration (the example files includes project files for Visual Studio). Besides the well documented example files, SoftImage also includes great API documentation.

The SoftImage plugin

Currently there is no easy way to take your SoftImage scene and render it on a webpage using WebGL. Our plugin iterates the scene and export all polygon mesh to a JSON mesh files. Besides it also export the scene structure to another JSON file; this includes materials, parent/child information, transforms, light and camera information. Finally it copies all diffuse textures to the export folder, it creates a sample html file and it save other dependencies.

There is a some limitations on what is supported for the export. Read the plugin documentation for more details.

The WebGL renderer

To actually render the scene we implemented the following in JavaScript:

  • WebGL-Renderer: Renders a scene in WebGL
  • WebGL-Loader: Loads the scene-file, mesh-files and textures
  • WebGL-Input: Handle mouse and keyboard input that let the user fly around in the scene

WebGL is shader based, so we also implemented some shaders in GLSL. Most important is the phong shader.

Since loading of JSON files requires a webbrowser, we also created a tiny web-server that can be used for testing the scene easily.

Using the plugin

The following videos show how to install and use the plugin. Note the videos are also available in the plugin itself (in higher resolution).

Getting the plugin

The plugin is released as Open Source under the Creative Commons Attribution 3.0.

The plugin (source, binaries and documentation) can be downloaded from:



  1. It works fine. I have a problem with the texture, only the default texture is applied (so I have rename my texture as “default-texture.jpg”). Does it support transparent texture (png) ?
    Thank you !

    • The plugin currently does not support transparent textures (it simply ignores the alpha channel). It would require another shader and that all transparent objects would be rendered last (in a back to front order).

  2. Hello Morten,
    Some models does not work, is there any limitation in texture size ou polygon count ?
    Thank you

    • Yes there a a lot of limitations 🙂 Texture dimensions needs to be a power of two (but they don’t need to be a square). And there is a limit of 64k vertex indices. See more info in the SoftImage help (click the help icon in the WebGLExportProp dialog)

  3. Installed the plugin through plugin manager as your guide but it doesn’t work. I get the “Library not found” message when click the .dll file in the tree and it has that red triangle.

    Tried with both SI 2011 and SI 2012, both 64 bit.

    Please help!

    • You shouldn’t select the dll-file. Select the workgroup instead. Read the full install instructions here:

      • Oh, I did select the workgroup when I installed it as in your instructions. I ment when looked up and clicked the .dll file in the Plugin Manager Tree to look for an error.

      • Everything seems fine when I’m installing it. But I don’t get the menu on the top and when I look up the WebGLExporter.64.dll in: Plugin Manager / Tree It has that red triangle.

  4. […] […]

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: