在使用 three.js 渲染 3D 模型时,使用 Next.Js 是否比普通 React 有任何优势?
Is there any advantage of usage Next.Js over plain React when it comes to rendering of 3D models with three.js?
我过去曾应用过 3D product configurator,想知道如果在普通 React 上使用 Next.JS 的“服务器端渲染”,3D 模型是否会执行得更好(应用程序的 FPS)。
three.js 依赖于您设备的显卡 (GPU) 和 WebGL API。服务器通常两者都没有,所以我预计性能会更差——而不是更好——除非你在服务器上花很多钱。存在在服务器上模拟 WebGL 1.0 的库(请参阅 headless-gl),但我还没有看到用于更现代的 Web 图形 API 的稳定库,例如 WebGL 2.0 和 WebGPU。
您可以通过缓存第一帧渲染将显示的图像并在 three.js 库加载时显示该图像来缩短到 First Contentful Paint 的时间,从而提高感知性能。也许 SSR 可以帮助解决这个问题。但我不希望在任何情况下以 60fps 的速度从您的服务器流式传输实时图像 — 在第一帧之后渲染可能最好在客户端完成。
某些由大型团队(Google Stadia、GeForce Now)支持的技术确实能够提供服务器端实时渲染,但这可能不是您想要在 next.js 应用程序上尝试的东西使用模拟的 WebGL API.
客户端呈现 (CSR) 的初始加载时间较长,因为 CSR 服务器发送客户端 javascript(而非 html)。然后客户端的网络浏览器执行 javascript 并根据 js 代码创建 html 结构。
在服务器端渲染 (SSR) 中,服务器执行提供的 javascript 并创建适当的 html 结构并将其放入 index.html(或适当的 html 文件)。当用户请求 html 文件时,服务器直接将 html 发送给用户,而不是 javascript.
因此,SSR 将提高应用程序加载的性能,但根据您的操作,使用 SSR 可能会带来更多优势或劣势
关于一项研究,我发现这取决于你做什么,你可以在某些用例中更好地利用 SSR,而在其他 CSR 中
In server side rendering, servers render 3D scene, compute view and send it as a image to the client, in the second approach, mesh data are transmitted to the client which finally renders it. The main advantage of server side rendering is that mesh doesn’t have to be sent over the network, which is especially important when we deal with large scale models. On the other hand client side rendering could utilise hardware acceleration, and provide more natural user navigation. Unfortunately large meshes can’t be rendered on the client side, because its computational power would be exceeded. That’s where progressive mesh algorithms are applied
我过去曾应用过 3D product configurator,想知道如果在普通 React 上使用 Next.JS 的“服务器端渲染”,3D 模型是否会执行得更好(应用程序的 FPS)。
three.js 依赖于您设备的显卡 (GPU) 和 WebGL API。服务器通常两者都没有,所以我预计性能会更差——而不是更好——除非你在服务器上花很多钱。存在在服务器上模拟 WebGL 1.0 的库(请参阅 headless-gl),但我还没有看到用于更现代的 Web 图形 API 的稳定库,例如 WebGL 2.0 和 WebGPU。
您可以通过缓存第一帧渲染将显示的图像并在 three.js 库加载时显示该图像来缩短到 First Contentful Paint 的时间,从而提高感知性能。也许 SSR 可以帮助解决这个问题。但我不希望在任何情况下以 60fps 的速度从您的服务器流式传输实时图像 — 在第一帧之后渲染可能最好在客户端完成。
某些由大型团队(Google Stadia、GeForce Now)支持的技术确实能够提供服务器端实时渲染,但这可能不是您想要在 next.js 应用程序上尝试的东西使用模拟的 WebGL API.
客户端呈现 (CSR) 的初始加载时间较长,因为 CSR 服务器发送客户端 javascript(而非 html)。然后客户端的网络浏览器执行 javascript 并根据 js 代码创建 html 结构。
在服务器端渲染 (SSR) 中,服务器执行提供的 javascript 并创建适当的 html 结构并将其放入 index.html(或适当的 html 文件)。当用户请求 html 文件时,服务器直接将 html 发送给用户,而不是 javascript.
因此,SSR 将提高应用程序加载的性能,但根据您的操作,使用 SSR 可能会带来更多优势或劣势
关于一项研究,我发现这取决于你做什么,你可以在某些用例中更好地利用 SSR,而在其他 CSR 中
In server side rendering, servers render 3D scene, compute view and send it as a image to the client, in the second approach, mesh data are transmitted to the client which finally renders it. The main advantage of server side rendering is that mesh doesn’t have to be sent over the network, which is especially important when we deal with large scale models. On the other hand client side rendering could utilise hardware acceleration, and provide more natural user navigation. Unfortunately large meshes can’t be rendered on the client side, because its computational power would be exceeded. That’s where progressive mesh algorithms are applied