You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
204 lines
12 KiB
204 lines
12 KiB
2 years ago
|
<!DOCTYPE html><html lang="zh"><head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>按需渲染</title>
|
||
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
||
|
|
<meta name="twitter:card" content="summary_large_image">
|
||
|
|
<meta name="twitter:site" content="@threejs">
|
||
|
|
<meta name="twitter:title" content="Three.js – 按需渲染">
|
||
|
|
<meta property="og:image" content="https://threejs.org/files/share.png">
|
||
|
|
<link rel="shortcut icon" href="/files/favicon_white.ico" media="(prefers-color-scheme: dark)">
|
||
|
|
<link rel="shortcut icon" href="/files/favicon.ico" media="(prefers-color-scheme: light)">
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="/manual/resources/lesson.css">
|
||
|
|
<link rel="stylesheet" href="/manual/resources/lang.css">
|
||
|
|
<!-- Import maps polyfill -->
|
||
|
|
<!-- Remove this when import maps will be widely supported -->
|
||
|
|
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
|
||
|
|
|
||
|
|
<script type="importmap">
|
||
|
|
{
|
||
|
|
"imports": {
|
||
|
|
"three": "../../build/three.module.js"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<link rel="stylesheet" href="/manual/zh/lang.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<div class="lesson-title">
|
||
|
|
<h1>按需渲染</h1>
|
||
|
|
</div>
|
||
|
|
<div class="lesson">
|
||
|
|
<div class="lesson-main">
|
||
|
|
<p>这一章的主题即便已经很明显了, 但... 以防万一, 还是说大多数情况下three.js给出的例子都是连续渲染的. 换言之他们使用了<code class="notranslate" translate="no">requestAnimationFrame</code>循环或者写成<em>rAF loop</em></p>
|
||
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function render() {
|
||
|
|
...
|
||
|
|
requestAnimationFrame(render);
|
||
|
|
}
|
||
|
|
requestAnimationFrame(render);
|
||
|
|
</pre>
|
||
|
|
<p>有些场景连续渲染是有意义的, 但是有些情况下不需要一直动呢? 这种情况下不断地渲染会浪费电, 对于移动设备来说属实不能接受. </p>
|
||
|
|
<p>显而易见的解决方法是一开始的时候渲染一次, 只有当什么东西改变了以后再次渲染. 这种改变包括纹理的变化, 或者再入了模型, 其他源传来了什么数据, 用户调整了设置或者是动了摄像机. </p>
|
||
|
|
<p>我们以<a href="responsive.html">响应式设计</a>这一章为例, 稍作修改以满足按需渲染.</p>
|
||
|
|
<p>首先我们添加<a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a>, 这样当摄像机改变之后场景就可以随之渲染</p>
|
||
|
|
<p>First we'll add in the <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a> so there is something that could change
|
||
|
|
that we can render in response to.</p>
|
||
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
|
||
|
|
+import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
|
||
|
|
</pre>
|
||
|
|
<p>然后</p>
|
||
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const fov = 75;
|
||
|
|
const aspect = 2; // the canvas default
|
||
|
|
const near = 0.1;
|
||
|
|
const far = 5;
|
||
|
|
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
|
||
|
|
camera.position.z = 2;
|
||
|
|
|
||
|
|
+const controls = new OrbitControls(camera, canvas);
|
||
|
|
+controls.target.set(0, 0, 0);
|
||
|
|
+controls.update();
|
||
|
|
</pre>
|
||
|
|
<p>我们不需要在渲染那三个正方体了所以不再追踪</p>
|
||
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-const cubes = [
|
||
|
|
- makeInstance(geometry, 0x44aa88, 0),
|
||
|
|
- makeInstance(geometry, 0x8844aa, -2),
|
||
|
|
- makeInstance(geometry, 0xaa8844, 2),
|
||
|
|
-];
|
||
|
|
+makeInstance(geometry, 0x44aa88, 0);
|
||
|
|
+makeInstance(geometry, 0x8844aa, -2);
|
||
|
|
+makeInstance(geometry, 0xaa8844, 2);
|
||
|
|
</pre>
|
||
|
|
<p>把这些代码移除, 然后调用<code class="notranslate" translate="no">requestAnimationFrame</code></p>
|
||
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-function render(time) {
|
||
|
|
- time *= 0.001;
|
||
|
|
+function render() {
|
||
|
|
|
||
|
|
if (resizeRendererToDisplaySize(renderer)) {
|
||
|
|
const canvas = renderer.domElement;
|
||
|
|
camera.aspect = canvas.clientWidth / canvas.clientHeight;
|
||
|
|
camera.updateProjectionMatrix();
|
||
|
|
}
|
||
|
|
|
||
|
|
- cubes.forEach((cube, ndx) => {
|
||
|
|
- const speed = 1 + ndx * .1;
|
||
|
|
- const rot = time * speed;
|
||
|
|
- cube.rotation.x = rot;
|
||
|
|
- cube.rotation.y = rot;
|
||
|
|
- });
|
||
|
|
|
||
|
|
renderer.render(scene, camera);
|
||
|
|
|
||
|
|
- requestAnimationFrame(render);
|
||
|
|
}
|
||
|
|
|
||
|
|
-requestAnimationFrame(render);
|
||
|
|
</pre>
|
||
|
|
<p>我们这次只需要渲染一次</p>
|
||
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">render();
|
||
|
|
</pre>
|
||
|
|
<p>我们需要在<a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a>改变摄像机设置的时候渲染场景.
|
||
|
|
幸好<a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a>提供了一个<code class="notranslate" translate="no">change</code>事件来监听变化</p>
|
||
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">controls.addEventListener('change', render);
|
||
|
|
</pre>
|
||
|
|
<p>我们同样需要捕捉到用户改变窗口大小的情况. 在之前连续渲染的时候这种情况是自动处理的, 但是现在是按需渲染, 我们需要在窗口改变的时候显式<code class="notranslate" translate="no">resize</code>窗口大小</p>
|
||
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">window.addEventListener('resize', render);
|
||
|
|
</pre>
|
||
|
|
<p>然后我们就实现了按需渲染的功能</p>
|
||
|
|
<p></p><div translate="no" class="threejs_example_container notranslate">
|
||
|
|
<div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/render-on-demand.html"></iframe></div>
|
||
|
|
<a class="threejs_center" href="/manual/examples/render-on-demand.html" target="_blank">点击此处在新标签页中打开</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a> 有个选项可以增加某种惯性, 让整个画面显得不那么僵硬. 我们启用<code class="notranslate" translate="no">enableDamping</code>来实现它<p></p>
|
||
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">controls.enableDamping = true;
|
||
|
|
</pre>
|
||
|
|
<p>开启<code class="notranslate" translate="no">enableDamping</code>, 我们需要在渲染函数中调用<code class="notranslate" translate="no">controls.update</code>, 让<a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a>可以丝滑地让摄像机移动. 但是, 这就意味着我们不能直接地在<code class="notranslate" translate="no">change</code>事件中调用<code class="notranslate" translate="no">render</code>, 如此这般会导致死循环. 控制器响应一个<code class="notranslate" translate="no">change</code>事件然后调用<code class="notranslate" translate="no">render</code>, 然后<code class="notranslate" translate="no">render</code>调用<code class="notranslate" translate="no">controls.update</code>. 这个方法会再发出另一个<code class="notranslate" translate="no">change</code>事件. </p>
|
||
|
|
<p>我们可以通过使用<code class="notranslate" translate="no">requestAnimationFrame</code>调用<code class="notranslate" translate="no">render</code>, 但是需要确保仅仅在需要一个新帧的时候才执行. 如果没有请求</p>
|
||
|
|
<p>我们可以通过使用<code class="notranslate" translate="no">requestAnimationFrame</code>调用<code class="notranslate" translate="no">render</code>来解决这个问题, 但是我们需要确保我们只在还没有请求一个新帧的情况下请求一个新帧, 我们可以通过一个变量来跟踪我们已经请求的帧</p>
|
||
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">+let renderRequested = false;
|
||
|
|
|
||
|
|
function render() {
|
||
|
|
+ renderRequested = false;
|
||
|
|
|
||
|
|
if (resizeRendererToDisplaySize(renderer)) {
|
||
|
|
const canvas = renderer.domElement;
|
||
|
|
camera.aspect = canvas.clientWidth / canvas.clientHeight;
|
||
|
|
camera.updateProjectionMatrix();
|
||
|
|
}
|
||
|
|
|
||
|
|
renderer.render(scene, camera);
|
||
|
|
}
|
||
|
|
render();
|
||
|
|
|
||
|
|
+function requestRenderIfNotRequested() {
|
||
|
|
+ if (!renderRequested) {
|
||
|
|
+ renderRequested = true;
|
||
|
|
+ requestAnimationFrame(render);
|
||
|
|
+ }
|
||
|
|
+}
|
||
|
|
|
||
|
|
-controls.addEventListener('change', render);
|
||
|
|
+controls.addEventListener('change', requestRenderIfNotRequested);
|
||
|
|
</pre>
|
||
|
|
<p>我们应该会在改变窗口大小的时候用到<code class="notranslate" translate="no">requestRenderIfNotRequested</code></p>
|
||
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-window.addEventListener('resize', render);
|
||
|
|
+window.addEventListener('resize', requestRenderIfNotRequested);
|
||
|
|
</pre>
|
||
|
|
<p>可能很难看出来有什么不同. 试着点一下下面的例子, 然后用方向键移动, 或者拖拽旋转. 然后在上面的例子中做同样的事, 你应该能感觉出来区别. 上面的像是一帧帧在放幻灯片, 下面则是丝滑柔顺.</p>
|
||
|
|
<p></p><div translate="no" class="threejs_example_container notranslate">
|
||
|
|
<div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/render-on-demand-w-damping.html"></iframe></div>
|
||
|
|
<a class="threejs_center" href="/manual/examples/render-on-demand-w-damping.html" target="_blank">点击此处在新标签页中打开</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p></p>
|
||
|
|
<p>让我们加一个简单的GUI</p>
|
||
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
|
||
|
|
import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
|
||
|
|
+import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
|
||
|
|
</pre>
|
||
|
|
<p>这个控制器可以改变每个立方体的颜色和在x方向缩放. 为了设置颜色我们用了<code class="notranslate" translate="no">ColorGUIHelper</code>, 这个在<a href="lights.html">光线</a>一章提到过</p>
|
||
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const gui = new GUI();
|
||
|
|
</pre>
|
||
|
|
<p>对每一个立方体, 我们建一个折叠菜单, 一个是<code class="notranslate" translate="no">material.color</code>, 另一个是<code class="notranslate" translate="no">cube.scale.x</code></p>
|
||
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function makeInstance(geometry, color, x) {
|
||
|
|
const material = new THREE.MeshPhongMaterial({color});
|
||
|
|
|
||
|
|
const cube = new THREE.Mesh(geometry, material);
|
||
|
|
scene.add(cube);
|
||
|
|
|
||
|
|
cube.position.x = x;
|
||
|
|
|
||
|
|
+ const folder = gui.addFolder(`Cube${x}`);
|
||
|
|
+ folder.addColor(new ColorGUIHelper(material, 'color'), 'value')
|
||
|
|
+ .name('color')
|
||
|
|
+ .onChange(requestRenderIfNotRequested);
|
||
|
|
+ folder.add(cube.scale, 'x', .1, 1.5)
|
||
|
|
+ .name('scale x')
|
||
|
|
+ .onChange(requestRenderIfNotRequested);
|
||
|
|
+ folder.open();
|
||
|
|
|
||
|
|
return cube;
|
||
|
|
}
|
||
|
|
</pre>
|
||
|
|
<p>上面的GUI用了一个<code class="notranslate" translate="no">onChange</code>方法, 在数值改变的时候调用传入一个回调函数. 这个例子中, 我们仅仅需要它调用<code class="notranslate" translate="no">requestRenderIfNotRequested</code>. <code class="notranslate" translate="no">folder.open</code>是使折叠菜单展开的方法</p>
|
||
|
|
<p></p><div translate="no" class="threejs_example_container notranslate">
|
||
|
|
<div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/render-on-demand-w-gui.html"></iframe></div>
|
||
|
|
<a class="threejs_center" href="/manual/examples/render-on-demand-w-gui.html" target="_blank">点击此处在新标签页中打开</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p></p>
|
||
|
|
<p>我希望这篇文章能在将连续渲染改成按需渲染的时候给你一些启发. 按需渲染不像是连续渲染那么常见, 因为3D游戏或者艺术创作中必须要让场景动出来. 但是有些场合, 例如地图浏览器, 3D编辑器, 3D图产生器等等的, 可能还是按需渲染比较好. </p>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="/manual/resources/prettify.js"></script>
|
||
|
|
<script src="/manual/resources/lesson.js"></script>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</body></html>
|