3D Model Quality Difference on Smartphones and Oculus Quest 2

We’re planning to build a game-like world using three.js.

The server and the data will be the same but users who use smartphones and Oculus Quest 2 will see different graphic qualities. But the basic world and the way they interact with other users are essentially the same.

So having this idea in mind, I’ve researched a lot (it was difficult to find benchmarks) and concluded that Oculus Quest 2 has specs just very similar to high-end smartphones like Galaxy S20. The difference is that Oculus Quest 2 can manage to run with a full capacity without being heated too much or running out of battery too quickly.

However, when I looked at games running on Oculus Quest 2, the graphics look very realistic. Something like this: Wow...This Is The Most Visually Stunning Virtual Reality Quest 2 Game! - YouTube whereas the most complex with a decent graphic three.js apps running on smartphones I found are: https://www.kodeclubs.com/ and 212 Heroes Skate Game

So, my question is how should we determine how low quality graphic (low-poly 3D models) on smartphones and how high quality graphic on Oculus Quest 2 we should plan?

Sorry I not really sure if I undertood good what you want to do ( My English is bad)

So I think you want something like: if smartphone then low-graphic, else hight quality graphics. if I´m right then you can just do something like:

if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
    || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) { 
//Load your low quality settings like textures, pixel ratio, disable some post procesing effects etc.
//you can even go more further here and do something like detect hight end devices and increse pixelRatio enable effects etc..
//Your hight quality graphics textures, settings etc.
//You can go even further using something like https://www.npmjs.com/package/detect-gpu
//To detect what GPU is running and add a more precise settings

Plus you can also create a settings menu 

I mean, my question is, before writing the code, how you would determine the right quality of 3D model? You have to prepare them in advance, right? So, in what quality do I have to prepare for smartphones and Oculus Quest 2?

Sorry, I still not sure if I understood. I think the answer is at to you. Because there are low-end, mid-end and hight-end mobile device. of course if you want nice shadows, lights, hight-poly textures etc… you have to keep in mind that low-end & mid-end mobile device will have problems runing your game.

PC usually are more powerful so I think is you can make your game look good for mid-end mobile device it will also look even better for pc users. You can use tools to thes your fps and draw-calls.

I think you can also try create your models with hight amout of polygons, test the performance and then (depending the case) increse or reduce their polygons using some software like Blender (decimate modifier for example). And do the same for the other settings like shadows, shaders, lights, etc… until reach a nice point between performance and quality for both (mobile devicse and pc)

I see. I thought there might be some generic consensus in the industry. But it was very difficult to find information or I would even argue that there is none at least in English :disappointed_relieved: