提交 30c60776 编写于 作者: G gogoend

docs: Translate "How to use post-processing" to Zh

上级 441c5321
...@@ -11,21 +11,21 @@ ...@@ -11,21 +11,21 @@
<h1>如何使用后期处理(How to use post-processing)</h1> <h1>如何使用后期处理(How to use post-processing)</h1>
<p> <p>
Many three.js applications render their 3D objects directly to the screen. Sometimes, however, you want to apply one or more graphical 很多three.js应用程序是直接将三维物体渲染到屏幕上的。
effects like Depth-Of-Field, Bloom, Film Grain or various types of Anti-aliasing. Post-processing is a widely used approach 有时,你或许希望应用一个或多个图形效果,例如景深、发光、胶片微粒或是各种类型的抗锯齿。
to implement such effects. First, the scene is rendered to a render target which represents a buffer in the video card's memory. 后期处理是一种被广泛使用、用于来实现这些效果的方式。
In the next step one ore more post-processing passes apply filters and effects to the image buffer before it is eventually rendered to 首先,场景被渲染到一个渲染目标上,渲染目标表示的是一块在显存中的缓冲区。
the screen. 接下来,在图像最终被渲染到屏幕之前,一个或多个后期处理过程将滤镜和效果应用到图像缓存区。
</p> </p>
<p> <p>
three.js provides a complete post-processing solution via [page:EffectComposer] to implement such a workflow. 通过[page:EffectComposer](效果合成器),three.js提供了一个完整的后期处理解决方案来实现这样的工作流程。
</p> </p>
<h2>Workflow</h2> <h2>工作流程</h2>
<p> <p>
The first step in the process is to import all necessary files from the examples directory. The guide assumes your are using the official 首先,我们要做的是从示例(examples)文件夹导入所有必需的文件。本指南假设你正在使用three.js官方npm包([link:https://www.npmjs.com/package/three npm package])。
[link:https://www.npmjs.com/package/three npm package] of three.js. For our basic demo in this guide we need the following files. 在本指南的基础示例中,我们需要下列文件。
</p> </p>
<code> <code>
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
</code> </code>
<p> <p>
After all files are successfully imported, we can create our composer by passing in an instance of [page:WebGLRenderer]. 当这些文件被成功导入后,我们便可以通过传入一个[page:WebGLRenderer]的实例,来创建我们的合成器了。
</p> </p>
<code> <code>
...@@ -43,8 +43,8 @@ ...@@ -43,8 +43,8 @@
</code> </code>
<p> <p>
When using a composer, it's necessary to change the application's animation loop. Instead of calling the render method of 在使用合成器时,我们需要对应用程序的动画循环进行更改。
[page:WebGLRenderer], we now use the respective counterpart of [page:EffectComposer]. 现在我们不再调用[page:WebGLRenderer]的render方法,而是使用[page:EffectComposer]中对应的render方法。
</p> </p>
<code> <code>
...@@ -58,10 +58,10 @@ ...@@ -58,10 +58,10 @@
</code> </code>
<p> <p>
Our composer is now ready so it's possible to configure the chain of post-processing passes. These passes are responsible for creating 我们的合成器已经准备好了,现在我们就可以来配置后期处理过程链了。
the final visual output of the application. They are processed in order of their addition/insertion. In our example, the instance of *RenderPass* 这些过程负责创建应用程序的最终视觉输出,它们按照添加/插入的顺序来进行处理。
is executed first and then the instance of *GlitchPass*. The last enabled pass in the chain is automatically rendered to the screen. The setup 在我们的示例中,*RenderPass*实例首先被执行,然后是*GlitchPass*。在链中的最后一个过程将自动被渲染到屏幕上。
of the passes looks like so: 这些过程的设置类似这样:
</p> </p>
<code> <code>
...@@ -73,23 +73,23 @@ ...@@ -73,23 +73,23 @@
</code> </code>
<p> <p>
*RenderPass* is normally placed at the beginning of the chain in order to provide the rendered scene as an input for the next post-processing step. In our case, *RenderPass*通常位于过程链的开始,以便将渲染好的场景作为输入来提供给下一个后期处理步骤。
*GlitchPass* is going to use these image data to apply a wild glitch effect. Check out this [link:https://threejs.org/examples/webgl_postprocessing_glitch live example] 在我们的示例中,*GlitchPass*将会使用这些图像数据,来应用一个疯狂的故障效果。参见这个示例:
to see it in action. [link:https://threejs.org/examples/webgl_postprocessing_glitch live example]来看一看它的实际效果。
</p> </p>
<h2>Built-in Passes</h2> <h2>内置过程</h2>
<p> <p>
You can use a wide range of pre-defined post-processing passes provided by the engine. They are located in the 你可以使用由本引擎提供的各种预定义好的后期处理过程,
[link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing postprocessing] directory. 它们位于[link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing postprocessing]目录中。
</p> </p>
<h2>Custom Passes</h2> <h2>自定义过程</h2>
<p> <p>
Sometimes you want to write a custom post-processing shader and include it into the chain of post-processing passes. For this scenario, 有时你或许想要自己写一个自定义后期处理着色器,并将其包含到后期处理过程链中。
you can utilize *ShaderPass*. After importing the file and your custom shader, you can use the following code to setup the pass. 对于这个需求,你可以使用*ShaderPass*。在引入该文件以及你的自定义着色期后,可以使用下列代码来设置该过程:
</p> </p>
<code> <code>
...@@ -103,9 +103,8 @@ ...@@ -103,9 +103,8 @@
</code> </code>
<p> <p>
The repository provides a file called [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/shaders/CopyShader.js CopyShader] which is a 本仓库中提供了一个名为[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/shaders/CopyShader.js CopyShader]的文件,
good starting code for your own custom shader. *CopyShader* just copies the image contents of the [page:EffectComposer]'s read buffer 这是你自定义自己的着色器的一个很好的起始代码。*CopyShader*仅仅是拷贝了读缓冲区中的图像内容到写缓冲区,不会应用任何效果。
to its write buffer without applying any effects.
</p> </p>
</body> </body>
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册