Renderfarm.js - server side photorealistic rendering of threejs scenes

[mmalex]

renderfarm.js is a server-side solution for slow photorealistic rendering of three.js scenes.

Following features are currently available:

• merge three.js scene into existing 3dsmax scenes,
• three.js material name is used to apply pre-defined materials from 3dsmax scene,
• three.js material groups are imported as MultiSubMaterial,
• all Vray settings can be defined by client library,
• support instanced geometry,
• support of PerspectiveCamera,
• support for lightmap baking,
• replacing three.js helpers by pre-defined XRefs.

Live demo is available on the project website: renderfarm.js

Use Case 1 — creating beautiful marketing materials
The project helps to sell the outcome of 3D web configurators. Whatever configured, - the potential client receives follow up email, with realistically looking renders, that must bring him closer to decision to order the item.

See it embedded in web configurator: https://youtu.be/iuFf-KMojFQ?t=142

Screenshot:

Use Case 2 — making photorealistic previews
Assume project features:

1. Upload SVG file,
2. Select plywood thickness,
3. Prepare your layout for laser cutting,

How this will look in real? Render.

See it embedded in three.js editor: https://youtu.be/WoWqhTctMq8?t=1

Screenshot:

Use Case 3 — rendering interior configurations
Check how this couch will look with that lamp, and those pillows, and please some random items on the table, the walls are deep red, no please black with that pattern. Render.

See how it works with simple furniture configurator: https://youtu.be/uznzlDO8frU?t=35

Screenshot:

[looeee]

Wow, very nice! Are you rendering with 3ds max on the server? And how to do you go about merging the three.js scene with the 3ds max one? Do you use an existing three.js exporter, or did you write your own?

One issue - when I render the scene on my mobile the finished render is completely off screen to the right.

[mmalex]

Hi, that’s a bit complicated,
the backend is Nodejs service on Ubuntu, plus mongo database to handle rendering sessions and deliver progress, results, etc. It controls remote rendering nodes (any number of them) which are windows, 3dsmax+vray machines.
The project I implemented completely myself, including necessary 3dsmsx plugins, like three.js scene importer, or remote maxscript controller (can send maxscript commands over tcp/ip)
That’s not perfect implementation, but all open source.

I have to make my website more mobile friendly,
Appreciate your feedback!

[aceway]

cool.
At the beginning, I saw the rendered result the same as you. After several attempts, I found the circle button that has two tiny triangles in it could be dragged.

[mmalex]

It must be fixed now, pls let me know if it has any problems yet. Thanks

[mmalex]

More complex demonstration of XRef importing feature for dynamically changed object.

1. Alarm clock is imported from single FBX file,
2. XRef binding is defined in Object3D.userData,
3. Clock hands and body are separate XRef objects, - makes it possible to combine them with individually defined transforms.

Usage of XRefs gives the advantage in case when three.js imports heavy models. On the demo alarm clock model is ~10MB FBX file, yet it takes milliseconds to start render job, because XRef replicas are available on server side.

https://www.youtube.com/watch?v=8tjCKyniJUQ

[Immugio]

Hello @mmalex, this is most impressive! I’m trying to find out what are the requirements for the server? Is it just a node server with no other special software? Would it generally run anywhere where node runs?

[mmalex]

Hi Immugio,
thanks for feedback! See, the service is essentially two computers:

• backend server, any Linux distribution, sufficient to have 2 cores and 4gb ram,
• render server(s), any number of servers, may be located in different places. This part mainly depends on what you render, how fast you expect results and how many parallel requests you need to handle.

Currently I run one test environment on Ryzen 7 3700X, which is of course not enough, but good to start.

You will need to take care about licenses too:

• 1 Windows license,
• 1 Vray license,
• 1 3dsmax license.

In my case, I rent Vray license on monthly basis, and use legacy 3dsmax 2018 which I have since my past projects.

The setup is expensive, I plan to switch to Blender and Octane render in future.

[looeee]

@mmalex

1 Vray license,

Any reason not to use Arnold instead?

[mmalex]

Fair question. As for now, it is possible to switch to any 3dsmax renderer. I use vray just because I’m too much addict to it

I will proceed describing project features:

• it can watch and kill (and restart) rendering processes that do not respond, or consume more ram than allowed,
• it does load balancing, the render job will be assigned to server with least cpu load,
• it had basic support for distribute rendering, to process 1 request with 2 and more render nodes

[looeee]

@mmalex

I use vray just because I’m too much addict to it

Can’t argue with that, it gives beautiful results. I asked since you mentioned this is expensive. Vray is what, $1000/year? While Arnold is free with Max. Not sure if the free license extends to network rendering though.

EDIT: I checked, the free license is for “within an interactive Max instance”, so presumably that doesn’t include network rendering. But I think you would just need a single user license which is EUR320/year.

[mmalex]

Vray is “only” €340 annually. It’s not awful expensive compared to server colocation and/or electricity costs. But anyway, this Vray is one of possible solutions. I’m really going to shift to gpu rendering and Blender soon.

[webprofusion]

This sounds cool, see also this experiment I did (not automated, but relatively easy to automate):

Cool things you can do with GLTFExporter: Blender Cycles Rendering!

I thought I’d share a cool workflow (probably already been demonstrated a few times?) you can do going from a three.js app (in this case an Ionic /Angular/TypeScript app) to blender, for magazine quality renders: The Ormsby Guitars designer app I built lets you customize a guitar and use custom materials such as this flamboyant number: [image] The dev version of the app now lets you export your design as glTF, so I did that. Then I had a look for some example Blender scenes with nice lightin…

It used the GLTF Exporter from threejs which then imported into blender. The advantage of this approach was that it saves on license fees.

[mmalex]

That’s really good alternative, I wonder how I did not see your post before O_o
Have you been using binary Gltf for this?

What I learned, - no matter how long it takes to render, if you can’t upload the scene fast enough.

[Immugio]

@webprofusion You approach is good in the way that it doesn’t require buying any licences. The rendering seem to be taking forever though. Out of interest, how long did it take you to render the guitar scene in your setup?

[webprofusion]

I think a Blender Cycles render took about 3 minutes or thereabouts, depends on the output size etc.

[mmalex]

There’s the way to do progressive rendering with some time limit. Then it will be guaranteed picture after some minutes, but can be too noisy.

[mmalex]

Introducing live demo of three.js editor integration:
http://editor.renderfarmjs.com

nmalex/renderfarm.js-three.js-editor

[makc3d]

Upload fails. What is the current limit?

[makc3d]

log says there are a bunch of uploads of… 508 bytes??