Translate webgl-and-alpha.md to Chinese

Author: colin3dmax

webgl/lessons/zh_cn/webgl-and-alpha.md

@@ -1,59 +1,39 @@
-Title: WebGL2 and Alpha
-Description: How alpha in WebGL is different than alpha in OpenGL
-TOC: WebGL2 and Alpha
+Title: WebGL2 和 Alpha
+Description: WebGL 中的 Alpha 与 OpenGL 中的 Alpha 有何不同
+TOC: WebGL2 和 Alpha
 
+我注意到一些 OpenGL 开发者在使用 WebGL 时遇到了关于后缓冲区（即画布）中 alpha 的问题，所以我觉得有必要讲一下 WebGL 和 OpenGL 在 alpha 处理上的一些差异。
 
-I've noticed some OpenGL developers having issues with how WebGL
-treats alpha in the backbuffer (ie, the canvas), so I thought it
-might be good to go over some of the differences between WebGL
-and OpenGL related to alpha.
+OpenGL 和 WebGL 最大的区别是，OpenGL 渲染到一个不会被任何东西合成的后缓冲区，或者说操作系统的窗口管理器实际上不会对它进行合成，所以无论 alpha 怎么设置都无所谓。
 
-The biggest difference between OpenGL and WebGL is that OpenGL
-renders to a backbuffer that is not composited with anything,
-or effectively not composited with anything by the OS's window
-manager, so it doesn't matter what your alpha is.
+而 WebGL 是由浏览器与网页内容合成的，默认使用预乘 alpha（premultiplied alpha），这和带透明通道的 PNG `<img>` 标签以及 2D canvas 标签的行为相同。
 
-WebGL is composited by the browser with the web page and the
-default is to use pre-multiplied alpha the same as .png `<img>`
-tags with transparency and 2D canvas tags.
+WebGL 有几种方式可以使其行为更像 OpenGL。
 
-WebGL has several ways to make this more like OpenGL.
-
-### #1) Tell WebGL you want it composited with non-premultiplied alpha
+### #1) 告诉 WebGL 你希望使用非预乘 alpha 合成
 
     gl = canvas.getContext("webgl2", {
       premultipliedAlpha: false  // Ask for non-premultiplied alpha
     });
 
-The default is true.
+默认值是 true。
 
-Of course the result will still be composited over the page with whatever
-background color ends up being under the canvas (the canvas's background
-color, the canvas's container background color, the page's background
-color, the stuff behind the canvas if the canvas has a z-index > 0, etc....)
-in other words, the color CSS defines for that area of the webpage.
+当然，结果仍会与画布下方的背景颜色合成（画布背景色、画布容器背景色、页面背景色，或者当画布 z-index 大于 0 时背后的内容），
+换句话说，是网页该区域 CSS 定义的颜色。
 
-A really good way to find if you have any alpha problems is to set the
-canvas's background to a bright color like red. You'll immediately see
-what is happening.
+判断是否存在 alpha 问题的一个好方法是将画布背景设置为鲜艳颜色，例如红色。你能立刻看到效果：
 
     <canvas style="background: red;"><canvas>
 
-You could also set it to black which will hide any alpha issues you have.
+你也可以设置成黑色，黑色会掩盖任何 alpha 问题。
 
-### #2) Tell WebGL you don't want alpha in the backbuffer
+### #2) 告诉 WebGL 你不需要后缓冲区的 alpha
 
     gl = canvas.getContext("webgl", { alpha: false }};
 
-This will make it act more like OpenGL since the backbuffer will only have
-RGB. This is probably the best option because a good browser could see that
-you have no alpha and actually optimize the way WebGL is composited. Of course
-that also means it actually won't have alpha in the backbuffer so if you are
-using alpha in the backbuffer for some purpose that might not work for you.
-Few apps that I know of use alpha in the backbuffer. I think arguably this
-should have been the default.
+这样它的行为更像 OpenGL，因为后缓冲区只会有 RGB。 这可能是最好的选择，因为优秀的浏览器能检测到你不需要 alpha， 从而优化 WebGL 的合成方式。 但这也意味着后缓冲区实际上没有 alpha，如果你确实依赖它可能会不适用。 我所知道的应用中很少使用后缓冲区 alpha。 从某种角度看，我认为这应该是默认行为。
 
-### #3) Clear alpha at the end of your rendering
+### #3) 在渲染结束时清除 alpha 通道
 
     ..
     renderScene();
@@ -68,14 +48,10 @@ should have been the default.
     // clear
     gl.clear(gl.COLOR_BUFFER_BIT);
 
-Clearing is generally very fast as there is a special case for it in most
-hardware. I did this in many of my first WebGL demos. If I was smart I'd switch to
-method #2 above. Maybe I'll do that right after I post this. It seems like
-most WebGL libraries should default to this method. Those few developers
-that are actually using alpha for compositing effects can ask for it. The
-rest will just get the best perf and the least surprises.
+清除操作通常非常快，因为大多数硬件对此有特殊优化。 我在许多早期 WebGL 示例中都这么做过。 如果聪明的话，应该用上面方法 #2。 也许我发完这条就去改。 大多数 WebGL 库也应该默认采用这种方法。 真正使用 alpha 进行合成效果的开发者可以主动开启。 其余人则能获得最佳性能和最少意外。
+
 
-### #4) Clear the alpha once then don't render to it anymore
+### #4) 清除 Alpha 通道一次，之后不再渲染到该通道
 
     // At init time. Clear the back buffer.
     gl.clearColor(1,1,1,1);
@@ -84,49 +60,38 @@ rest will just get the best perf and the least surprises.
     // Turn off rendering to alpha
     gl.colorMask(true, true, true, false);
 
-Of course if you are rendering to your own framebuffers you may need to turn
-rendering to alpha back on and then turn it off again when you switch to
-rendering to the canvas.
+当然如果你在渲染自定义的帧缓冲区时， 可能需要重新开启 alpha 渲染， 然后切回渲染画布时再关闭。
 
-### #5) Handling Images
+### #5) 处理带 alpha 的图片
 
-By default if you are loading images with alpha into WebGL, WebGL will
-provide the values as they are in the file with color values not
-premultiplied. This is generally what I'm used to for OpenGL programs
-because it's lossless whereas pre-multiplied is lossy.
+默认情况下，加载带 alpha 的图片到 WebGL，WebGL 会提供文件中的原始颜色值， 且颜色值未做预乘。 这一般符合我对 OpenGL 程序的使用习惯， 因为未预乘是无损的，而预乘会有损失。
 
     1, 0.5, 0.5, 0  // RGBA
 
-Is a possible un-premultiplied value whereas pre-multiplied it's an
-impossible value because `a = 0` which means `r`, `g`, and `b` have
-to be zero.
+这是一个可能的未预乘值， 但预乘情况下不可能出现这种值， 因为 alpha = 0，r、g、b 必须都是 0。
 
-When loading an image you can have WebGL pre-multiply the alpha if you want.
-You do this by setting `UNPACK_PREMULTIPLY_ALPHA_WEBGL` to true like this
+加载图像时，如果需要，可以让 WebGL 对 Alpha 进行预乘。
+你可以通过如下方式将 UNPACK_PREMULTIPLY_ALPHA_WEBGL 设置为 true 来实现。
 
     gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
 
-The default is un-premultiplied.
+默认情况下是不进行预乘的。
 
-Be aware that most if not all Canvas 2D implementations work with
-pre-multiplied alpha. That means when you transfer them to WebGL and
-`UNPACK_PREMULTIPLY_ALPHA_WEBGL` is false WebGL will convert them
-back to un-premultipiled.
+请注意，大多数（如果不是全部的话）Canvas 2D 实现都使用预乘 alpha。 这意味着当你将它们传输到 WebGL 并且 UNPACK_PREMULTIPLY_ALPHA_WEBGL 设置为 false 时，WebGL 会将它们转换回非预乘状态。
 
-### #6) Using a blending equation that works with pre-multiplied alpha.
+### #6) 使用与预乘 alpha 兼容的混合方程
 
-Almost all OpenGL apps I've writing or worked on use
+我写过或参与过的几乎所有 OpenGL 应用， 默认都是这样设置混合函数。
 
     gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
 
-That works for non pre-multiplied alpha textures.
+这适用于非预乘 alpha 的纹理。
 
-If you actually want to work with pre-multiplied alpha textures then you
-probably want
+如果你确实想使用预乘 alpha 纹理，那么你可能需要使用以下设置
 
     gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
 
-Those are the methods I'm aware of. If you know of more please post them below.
+这些是我所知道的方法。如果你了解更多，请在下方分享。