How to make threejs rendering as good as react three fiber?

Questions
, ,
1

Tried many post processing , different environment and lighting setup.

Bt I feel it’s so difficult to get a good rendering on plain threejs compared to react three fiber, just when I put a simple direction light in RTF is much better than all post processing and hours of fine tuning of lights and environment in threejs.

I’m developing threejs application from 4-5 years and our applications reached certain maturity it’s basically on angular I feel it’s so difficult to port all that into react three fiber just for the rendering quality and lighting

Why there is no easy way to get good quality rendering as RTF or is there anything I’m missing. Since threejs is much older than RTF it should be better compared to RTF bt unfortunately it’s not

2

R3F is three.js.

There’s virtually no difference between them, R3F is just bindings for vanilla three.js with some react additions (like color management and out of the box events handling via raycasting.)

The solution to your question greatly depends on two factors (esp. that you mentioned it’s an older application code base):

  1. Which version of three.js annd R3F are you porting from?
  2. Which version of three.js are you porting to?
3

I think by default R3F has enabled antialias, matched pixel ratio to window, has a different tone map (aces something) and srgb colorspace encoding. This should match the three js look to r3f. three.js docs

4

i think it’s really just this:

THREE.ColorManagement.enabled = true

const gl = new THREE.WebGLRenderer({
  powerPreference: 'high-performance',
  antialias: true,
  alpha: true,
})

gl.outputEncoding = THREE.sRGBEncoding
gl.toneMapping = THREE.ACESFilmicToneMapping
gl.setPixelRatio(Math.min(Math.max(1, window.devicePixelRatio), 2))

everything that @mjurczyk said otherwise. but there are countless of easily applied components in the eco system that make scenes look good, i think it’s that which you have seen. this is something that’s lacking in vanilla three.

imo these make the biggest difference:

the environment component

soft directional light
https://codesandbox.io/p/sandbox/room-with-soft-shadows-ykfpwf

accumulative shadows
https://codesandbox.io/p/sandbox/baking-soft-shadows-hxcc1x?file=%2Fsrc%2Findex.js

postpro and reflections
https://codesandbox.io/p/sandbox/monitors-bst0cy

ps — made a small tutorial in tweet format a while ago https://twitter.com/0xca0a/status/1625177704323596305 some of it is outdated now but the overall direction is still valid — environment is absolutely the #1 key, so easy to handle, and curiously it’s often ignored.

4 Likes
5

Yes exactly I have tried all other options others mentioned in RTF examples you shown have some great light shadows and AO and SSR. Why these are not available in threejs. I really want to get the rendering quality of RTF bt don’t want to migrate to RTF because a alot of things has to redesign in my application which is 3-4 years of works.

The GI and shadows what we are getting in RTF should not be that difficult to get I threejs if not that can be made with some custom post processing and shaders… the question if RTF is same as threejs why these examples are not available in threejs.

6

Checkout GitHub - pmndrs/drei-vanilla: 🍦 drei-inspired helpers for threejs

7

All these options are available in Threejs tho. Its just that R3F has enabled these rendering options as default. Just copy these few lines of code for the exact same results in Threejs.

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.outputColorSpace = THREE.SRGBColorSpace
renderer.toneMapping = THREE.ACESFilmicToneMapping
renderer.setPixelRatio(window.devicePixelRatio)

Im not even sure that colorspace needs to be defined. Just read the rendering documentation and experiment to make things look to your liking.

2 Likes
8
  • Bold statement :sweat_smile:
  • I would not port a 4-5 year endeavour just for this matter
  • RTF does not seem to be really suited for large applications, but for demos and ‘micro’ experiences (please guys correct me if I am wrong)
  • from my own experience, everything is much straightforward in plain threejs once you set a ‘look & feel’ goal
  • try to avoid more than 3 lights, they are not any better than a good polished envmap, and its much performant (and PBR is your friend)

Finally, remember that photorealism is not necesarely the only ‘good’ look, but the same principles apply for any other ‘good quality’ you may be looking after, as Andre Price once said:

9

i can correct you. :smiling_face_with_tear: it is 100% for large applications. it is what fiber was primarily made for (it started with buerli.io, a cad system). that you can also make micro experiences is a nice benefit. i guarantee you that vanilla three for large scale will become the outlier, if it hasn’t already.

10

there is no easy answer. you won’t have an eco system or participate in one in vanilla three. it hasn’t been able to carve one out for itself in 15 years, it won’t do it tomorrow. you may have dispersed libraries, snippets on stackoverflow, forum posts and the examples on the website, which are full blown applications that you have to adapt to your needs. but you don’t have drop in components because that requires a higher paradigm than oop → functional programming.

oop is a data storage container, it has no concept of interop and composition. these are capabilities found in fp (think ramda, lodash, react). composition of parts that have no knowledge of one another is the basis of an eco system of components.

you can try to go through the code, try drei for instance. and most certainly you can make it work. perhaps it will be easier than having to untangle three/examples since react at least is ordered. but it will nonetheless be a lot of work. you will find a few things in vanilla-drei.

11

Oh, I really don’t see the need to go over this point again and again. Besides looking like a biased assessment, it comes dangerously close to the very definition of disinformation. Please let’s not do that, this is a safe place to share knowledge, not to smear or manipulate anyone (and believe me, that’s what it looks like).

The OP’s original question is about tips and suggestions to make his application ‘look good’, explicitly avoiding translating everything to RTF. So please don’t want to tell him “the only valid structure is to use RTF” because that is, in his exact words, what the OP is asking to avoid.

1 Like
12

I think I answered him properly above, there is no component eco system in threejs outside fibers, there is no easy way to make apps look good because it requires a lot of work, shaders, tricks. The only thing you can do is translate drei components. but this isn’t a shareable effort, it has to be repeatedly adapted for each new app.

React three apps look good because people have drop in components. If you figured something out you can self contain it and share. If there would be another way I would know.

You brought this stuff up about large scale and asked to be corrected, so I did. Curious to see you talk about bias and disinformation now, but I’m used to it. I gave you a sentence instead of further links because I did think that what you wrote had nothing to do with this topic.