mdn · yin1999 · Jun 2, 2022 · May 28, 2022 · Jun 2, 2022 · Jun 2, 2022
@@ -8,11 +8,11 @@
 <div>{{WebGLSidebar}}</div>
 
 <div id="live-sample">
-<p>在这个WebGL示例中，我们创建一个画布，并在其中使用WebGL渲染旋转正方形。我们用来表示场景的坐标系与画布的坐标系相同。也就是说，（0, 0）这个坐标在左上角，右下角是坐标在（600, 460）。</p>
+<p>在这个 WebGL 示例中，我们创建一个画布，并在其中使用 WebGL 渲染旋转正方形。我们用来表示场景的坐标系与画布的坐标系相同。也就是说，（0, 0）这个坐标在左上角，右下角是坐标在（600, 460）。</p>
 
 <h2 id="Vertex_shader">Vertex shader</h2>
 
-<p>首先，让我们看一下顶点着色器。它的工作如同以往，是将我们用于场景的坐标转换为剪贴空间的坐标（即系统中的（0，0）位于上下文的中心，每个轴从-1.0扩展到1.0，而不管上下文的实际大小）。</p>
+<p>首先，让我们看一下顶点着色器。它的工作如同以往，是将我们用于场景的坐标转换为剪贴空间的坐标（即系统中的（0，0）位于上下文的中心，每个轴从-1.0 扩展到 1.0，而不管上下文的实际大小）。</p>
 
 <pre class="brush: html">&lt;script id="vertex-shader" type="x-shader/x-vertex"&gt;
   attribute vec2 aVertexPosition;
@@ -32,7 +32,7 @@ <h2 id="Vertex_shader">Vertex shader</h2>
   }
 &lt;/script&gt;</pre>
 
-<p dir="ltr" id="tw-target-text">主程序与我们共享属性aVertexPosition，它是顶点在其使用的任何坐标系中的位置。我们需要转换这些值，以便位置的两个组件都在-1.0到1.0的范围内。通过乘以基于上下文宽高比的缩放因子，可以很容易地完成此操作。我们很快就会看到这个计算。</p>
+<p dir="ltr" id="tw-target-text">主程序与我们共享属性 aVertexPosition，它是顶点在其使用的任何坐标系中的位置。我们需要转换这些值，以便位置的两个组件都在-1.0 到 1.0 的范围内。通过乘以基于上下文宽高比的缩放因子，可以很容易地完成此操作。我们很快就会看到这个计算。</p>
 
 <p>我们也可以通过一次变换来旋转这个图形。 The rotated position of the vertex is computed by applying the rotation vector, found in the uniform <code>uRotationVector</code>, that's been computed by the JavaScript code.</p>
 

@@ -7,9 +7,8 @@
 <p>{{PreviousNext("Learn/WebGL/By_example/Color_masking","Learn/WebGL/By_example/Canvas_size_and_WebGL")}}</p>
 
 <div id="basic-scissoring">
-<div>
-<p>在本例中，我们将学会如何使用WebGL （scissoring operations）剪切操作来绘制简单的矩形和正方形。Scissoring建立了一个剪切区域，在此区域外不会发生绘图。</p>
-</div>
+
+<p>在本例中，我们将学会如何使用 WebGL（scissoring operations）剪切操作来绘制简单的矩形和正方形。Scissoring 建立了一个剪切区域，在此区域外不会发生绘图。</p>
 
 <p>{{EmbedLiveSample("basic-scissoring-source",660,425)}}</p>
 

@@ -6,22 +6,21 @@
 <p>{{PreviousNext("Learn/WebGL/By_example/Canvas_size_and_WebGL","Learn/WebGL/By_example/Scissor_animation")}}</p>
 
 <div id="boilerplate-1">
-<div>
-<p>这个例子描述了从现在开始将要隐藏重复的代码片断,以及定义一个JavaScript函数复用以简化WebGL初始化。</p>
-</div>
+
+<p>这个例子描述了从现在开始将要隐藏重复的代码片断，以及定义一个 JavaScript 函数复用以简化 WebGL 初始化。</p>
 
 <p>{{EmbedLiveSample("boilerplate-1-source",660,400)}}</p>
 
 <div id="boilerplate-1-intro">
-<h3 id="用于设置WebGL呈现上下文的复用代码">用于设置WebGL呈现上下文的复用代码</h3>
+<h3 id="用于设置WebGL呈现上下文的复用代码">用于设置 WebGL 呈现上下文的复用代码</h3>
 
 <p>现在你很习惯看到相同的{{Glossary("HTML")}}, {{Glossary("CSS")}}和{{Glossary("JavaScript")}}重复一遍又一遍。所以我们从现在起要隐藏他们。这将使我们能够专注于代码最有趣的部分相关学习{{Glossary("WebGL")}}。</p>
 
-<p>特别是，在HTML的{{HTMLElement("p")}}元素包含一些描述性的文本页面也可以是错误消息；一个{{HTMLElement("canvas")}} 元素;和一个可选的{{HTMLElement("button")}}。CSS规则包含<code>body</code>, <code>canvas</code>, 和<code>button</code>。任何额外的冗余的CSS和HTML将不会显示在页面的具体的例子。</p>
+<p>特别是，在 HTML 的{{HTMLElement("p")}}元素包含一些描述性的文本页面也可以是错误消息；一个{{HTMLElement("canvas")}} 元素;和一个可选的{{HTMLElement("button")}}。CSS 规则包含<code>body</code>, <code>canvas</code>, 和<code>button</code>。任何额外的冗余的 CSS 和 HTML 将不会显示在页面的具体的例子。</p>
 
-<p>在以下示例中,我们将使用一个JavaScript函数功能,<code>getRenderingContext()</code> ，来初始化{{domxref("WebGLRenderingContext","WebGL rendering context", "", 1)}}。现在,您应该能够了解什么功能。基本上,它得到了WebGL从画布元素，渲染上下文初始化绘图缓冲区，清除它黑色，并返回初始化上下文。在错误的情况下，它会显示一个错误消息，并返回 {{jsxref("null")}}。</p>
+<p>在以下示例中，我们将使用一个 JavaScript 函数功能，<code>getRenderingContext()</code> ，来初始化{{domxref("WebGLRenderingContext","WebGL rendering context", "", 1)}}。现在，您应该能够了解什么功能。基本上，它得到了 WebGL 从画布元素，渲染上下文初始化绘图缓冲区，清除它黑色，并返回初始化上下文。在错误的情况下，它会显示一个错误消息，并返回 {{jsxref("null")}}。</p>
 
-<p>最后,所有JavaScript代码将运行在一个直接的函数,这是一种常见的JavaScript技术(see {{Glossary("Function")}})。函数声明和调用也将被隐藏。</p>
+<p>最后，所有 JavaScript 代码将运行在一个直接的函数，这是一种常见的 JavaScript 技术 (see {{Glossary("Function")}})。函数声明和调用也将被隐藏。</p>
 </div>
 
 <div id="boilerplate-1-source">

@@ -5,23 +5,21 @@
 ---
 <p>{{PreviousNext("Learn/WebGL/By_example/Basic_scissoring","Learn/WebGL/By_example/Boilerplate_1")}}</p>
 
-<div>
-<p>此WebGL案例将探究设置（或不设置）Canvas属性的宽高值在浏览器中显示的影响。</p>
-</div>
+<p>此 WebGL 案例将探究设置（或不设置）Canvas 属性的宽高值在浏览器中显示的影响。</p>
 
 <div id="canvas-size-and-webgl">
 <p>{{EmbedLiveSample("canvas-size-and-webgl-source",660,180)}}</p>
 
 <div id="canvas-size-and-webgl-intro">
-<h3 id="canvas属性值大小对WebGL渲染的作用">canvas属性值大小对WebGL渲染的作用</h3>
+<h3 id="canvas属性值大小对WebGL渲染的作用">canvas 属性值大小对 WebGL 渲染的作用</h3>
 
-<p>使用 {{domxref("WebGLRenderingContext.scissor()","scissor()")}} 和 {{domxref("WebGLRenderingContext.clear()","clear()")}} 我们可以观察到canvas属性大小是如何影响WebGL绘图展示的。</p>
+<p>使用 {{domxref("WebGLRenderingContext.scissor()","scissor()")}} 和 {{domxref("WebGLRenderingContext.clear()","clear()")}} 我们可以观察到 canvas 属性大小是如何影响 WebGL 绘图展示的。</p>
 
-<p>第一个canvas元素通过css样式定义了元素的大小，之后通过javascript获取该元素的 {{domxref("Element.clientWidth","clientWidth")}} 和{{domxref("Element.clientHeight","clientHeight")}} 值，并分别赋值给元素的  {{domxref("HTMLCanvasElement.width","width")}} 和{{domxref("HTMLCanvasElement.height","height")}}。</p>
+<p>第一个 canvas 元素通过 css 样式定义了元素的大小，之后通过 javascript 获取该元素的 {{domxref("Element.clientWidth","clientWidth")}} 和{{domxref("Element.clientHeight","clientHeight")}} 值，并分别赋值给元素的  {{domxref("HTMLCanvasElement.width","width")}} 和{{domxref("HTMLCanvasElement.height","height")}}。</p>
 
-<p>相反的，第二个canvas元素并没有这样做，canvas内部对象的{{domxref("HTMLCanvasElement.width","width")}} 和 {{domxref("HTMLCanvasElement.height","height")}} 属性值仍然是默认值，这样导致在浏览器中实际画布大小是不同的。</p>
+<p>相反的，第二个 canvas 元素并没有这样做，canvas 内部对象的{{domxref("HTMLCanvasElement.width","width")}} 和 {{domxref("HTMLCanvasElement.height","height")}} 属性值仍然是默认值，这样导致在浏览器中实际画布大小是不同的。</p>
 
-<p>使用 {{domxref("WebGLRenderingContext.scissor()","scissor()")}} 和{{domxref("WebGLRenderingContext.clear()","clear()")}}在canvas中绘制矩形的效果是清晰可见的，在第一个canvas中，通过指定位置和像素大小，可以得到我们想要的效果，但是在第二个canvas中，这个矩形的位置、大小都是错误展示的。</p>
+<p>使用 {{domxref("WebGLRenderingContext.scissor()","scissor()")}} 和{{domxref("WebGLRenderingContext.clear()","clear()")}}在 canvas 中绘制矩形的效果是清晰可见的，在第一个 canvas 中，通过指定位置和像素大小，可以得到我们想要的效果，但是在第二个 canvas 中，这个矩形的位置、大小都是错误展示的。</p>
 </div>
 
 <div id="canvas-size-and-webgl-source">

@@ -6,9 +6,8 @@
 <p>{{PreviousNext("Learn/WebGL/By_example/Clearing_with_colors","Learn/WebGL/By_example/Simple_color_animation")}}</p>
 
 <div id="clearing-by-clicking">
-<div>
-<p>此示例演示了如何通过用户单击时用随机颜色渲染上下文来将用户交互与WebGL图形操作结合起来。</p>
-</div>
+
+<p>此示例演示了如何通过用户单击时用随机颜色渲染上下文来将用户交互与 WebGL 图形操作结合起来。</p>
 
 <p>{{EmbedLiveSample("clearing-by-clicking-source",660,425)}}</p>
 

@@ -13,15 +13,15 @@
 <p>{{EmbedLiveSample("clearing-with-colors-source",660,425)}}</p>
 
 <div id="clearing-with-colors-intro">
-<h3 id="清除画布（使用单一颜色清除WebGl区域）">清除画布（使用单一颜色清除WebGl区域）</h3>
+<h3 id="清除画布（使用单一颜色清除WebGl区域）">清除画布（使用单一颜色清除 WebGl 区域）</h3>
 
-<p>这是一个最简单的WebGL代码。通过{{domxref("WebGLRenderingContext","rendering context", "", 1)}}设置好状态后，直接将整个区域清除为绿色。要注意css 已经将canvas画布设置为黑色了，所以当画布变为绿色时，我们就知道神奇的WebGL魔法起作用了！</p>
+<p>这是一个最简单的 WebGL 代码。通过{{domxref("WebGLRenderingContext","rendering context", "", 1)}}设置好状态后，直接将整个区域清除为绿色。要注意 css 已经将 canvas 画布设置为黑色了，所以当画布变为绿色时，我们就知道神奇的 WebGL 魔法起作用了！</p>
 
-<p>此外，你需要注意用单色绘制图像是两个步骤：首先，通过使用{{domxref("WebGLRenderingContext.clearColor()","clearColor()")}}设置清除色为绿色。这只会改变Webgl 内部的一个状态，但并不会绘制任何东西。接下来，我们就真的开始绘制了，使用{{domxref("WebGLRenderingContext.clear()","clear()")}}方法，这是一个典型的用webgl绘制的方法，webgl 实际上只有少数的几个绘制方法(clear() 就是其中之一)。其他方法大多都是类似设置或改变WebGl状态和变量的（例如设置clearcolor）。</p>
+<p>此外，你需要注意用单色绘制图像是两个步骤：首先，通过使用{{domxref("WebGLRenderingContext.clearColor()","clearColor()")}}设置清除色为绿色。这只会改变 Webgl 内部的一个状态，但并不会绘制任何东西。接下来，我们就真的开始绘制了，使用{{domxref("WebGLRenderingContext.clear()","clear()")}}方法，这是一个典型的用 webgl 绘制的方法，webgl 实际上只有少数的几个绘制方法 (clear() 就是其中之一)。其他方法大多都是类似设置或改变 WebGl 状态和变量的（例如设置 clearcolor）。</p>
 
-<p>这里有许多属性和方法作用于Webgl，清除方法只是你第一个掌握的，这也就是为什么WebGL／OpenGl经常被叫做状态机，通过调整这些属性和方法可以修改WebGL内部的状态，从而进行输出（例如先设置好绿色，在清除画布的时候像素点都变成了绿色）</p>
+<p>这里有许多属性和方法作用于 Webgl，清除方法只是你第一个掌握的，这也就是为什么 WebGL／OpenGl 经常被叫做状态机，通过调整这些属性和方法可以修改 WebGL 内部的状态，从而进行输出（例如先设置好绿色，在清除画布的时候像素点都变成了绿色）</p>
 
-<p>最后，我们知道在WebGl中颜色格式是由RGBA（红，绿，蓝，透明度）组成的，因此clearColor()方法接受四个参数</p>
+<p>最后，我们知道在 WebGl 中颜色格式是由 RGBA（红，绿，蓝，透明度）组成的，因此 clearColor() 方法接受四个参数</p>
 
 <p> </p>
 </div>

@@ -6,9 +6,8 @@
 <p>{{PreviousNext("Learn/WebGL/By_example/Simple_color_animation","Learn/WebGL/By_example/Basic_scissoring")}}</p>
 
 <div id="color-masking">
-<div>
-<p>这个 WebGL 示例 通过随机的颜色(random colors)应用到colorMask,从而将显示的颜色范围限制在特定的颜色通道(red/green/blue);</p>
-</div>
+
+<p>这个 WebGL 示例 通过随机的颜色 (random colors) 应用到 colorMask，从而将显示的颜色范围限制在特定的颜色通道 (red/green/blue);</p>
 
 <p>{{EmbedLiveSample("color-masking-source",660,425)}}</p>
 

@@ -1,5 +1,5 @@
 ---
-title: 检测WebGL
+title: 检测 WebGL
 slug: Web/API/WebGL_API/By_example/Detect_WebGL
 translation_of: Web/API/WebGL_API/By_example/Detect_WebGL
 ---
@@ -13,11 +13,11 @@
 <p>{{EmbedLiveSample("detect-webgl-source",660,150)}}</p>
 
 <div id="detect-webgl-intro">
-<h3 id="WebGL特性检测">WebGL特性检测</h3>
+<h3 id="WebGL特性检测">WebGL 特性检测</h3>
 
-<p>在第一个例子中，我们将检查浏览器是否支持{{Glossary("WebGL")}}。为此，我们将尝试从{{domxref("HTMLCanvasElement","canvas")}}元素获取{{domxref("WebGLRenderingContext","WebGL渲染的上下文","",1)}} 。{{domxref("WebGLRenderingContext","WebGL渲染的上下文", "", 1)}}是一个接口，通过它你可以设置和查询绘图器的状态，发送数据到WebGL，执行绘制命令。</p>
+<p>在第一个例子中，我们将检查浏览器是否支持{{Glossary("WebGL")}}。为此，我们将尝试从{{domxref("HTMLCanvasElement","canvas")}}元素获取{{domxref("WebGLRenderingContext","WebGL 渲染的上下文","",1)}} 。{{domxref("WebGLRenderingContext","WebGL 渲染的上下文", "", 1)}}是一个接口，通过它你可以设置和查询绘图器的状态，发送数据到 WebGL，执行绘制命令。</p>
 
-<p>在单个上下文接口中保存绘图器的状态并不是{{Glossary("WebGL")}}独有的。这在其他绘图技术里也是存在的{{Glossary("API")}},比如{{domxref("CanvasRenderingContext2D","2D渲染上下文的canvas", "", 1)}}。然而，您可以调整的属性和变量对于每个{{Glossary("API")}}来说都是不同的。</p>
+<p>在单个上下文接口中保存绘图器的状态并不是{{Glossary("WebGL")}}独有的。这在其他绘图技术里也是存在的{{Glossary("API")}},比如{{domxref("CanvasRenderingContext2D","2D 渲染上下文的 canvas", "", 1)}}。然而，您可以调整的属性和变量对于每个{{Glossary("API")}}来说都是不同的。</p>
 </div>
 
 <div id="detect-webgl-source">

@@ -11,13 +11,13 @@
 </div>
 
 <div class="note">
-<p><strong>注意：</strong>本例子能在大多数现代桌面版浏览器上运行。但或许不能在移动端或者古老的浏览器上运行。如果canvas显示一片空白，你可以试着用下一个例子检查一下输出是否绘制的是同样的图形。 但要记住在前往下一个例子之前，要仔细阅读本页并动手写代码。</p>
+<p><strong>注意：</strong>本例子能在大多数现代桌面版浏览器上运行。但或许不能在移动端或者古老的浏览器上运行。如果 canvas 显示一片空白，你可以试着用下一个例子检查一下输出是否绘制的是同样的图形。 但要记住在前往下一个例子之前，要仔细阅读本页并动手写代码。</p>
 </div>
 
 <p>{{EmbedLiveSample("hello-glsl-source",660,425)}}</p>
 
 <div id="hello-glsl-intro">
-<h3 id="用GLSL语言写Hello_World_程序">用GLSL语言写Hello World 程序</h3>
+<h3 id="用GLSL语言写Hello_World_程序">用 GLSL 语言写 Hello World 程序</h3>
 
 <p>第一个非常简单的着色器程序。</p>
 </div>

@@ -6,16 +6,15 @@
 <p>{{Next("Learn/WebGL/By_example/Detect_WebGL")}}</p>
 
 <div id="webgl-by-example">
-<div>
-<p>WebGL <em>例子</em>是一系列附有简短的解释的样本用来展示WebGL的概念和功能。这些示例根据主题和难度级别进行排序，涵盖WebGL渲染上下文，着色器编程，纹理，几何图形，用户交互等。</p>
-</div>
+
+<p>WebGL <em>例子</em>是一系列附有简短的解释的样本用来展示 WebGL 的概念和功能。这些示例根据主题和难度级别进行排序，涵盖 WebGL 渲染上下文，着色器编程，纹理，几何图形，用户交互等。</p>
 
 <div id="webgl-by-example-big-list">
 <h2 id="主题例子">主题例子</h2>
 
 <p>这些范例是有浅到深的，它们除了是一个个可以让你实现的例子外，还和主题高度重合，当我们需要在中级和高级阶段实现这个例子时有时我们会重复此例子的基础内容。</p>
 
-<p>在第一个程序中，并没有尝试着色着色器，几何图形和使用{{Glossary("GPU")}} 内存，这里的示例以渐进的方式探索WebGL。我们相信它会带来更有效的学习体验，并最终更深入地理解底层概念。</p>
+<p>在第一个程序中，并没有尝试着色着色器，几何图形和使用{{Glossary("GPU")}} 内存，这里的示例以渐进的方式探索 WebGL。我们相信它会带来更有效的学习体验，并最终更深入地理解底层概念。</p>
 
 <p>有关这些例子的解释可以在代码的正文和注释中找到。您应该阅读所有注释，因为更高级的示例不会重复注释以前的代码。</p>
 

@@ -6,18 +6,17 @@
 <p>{{PreviousNext("Learn/WebGL/By_example/Boilerplate_1","Learn/WebGL/By_example/Raining_rectangles")}}</p>
 
 <div id="scissor-animation">
-<div>
-<p>使用剪切和清除操作实现一些动画的简单WebGL的例子。</p>
-</div>
+
+<p>使用剪切和清除操作实现一些动画的简单 WebGL 的例子。</p>
 
 <p>{{EmbedLiveSample("scissor-animation-source",660,425)}}</p>
 
 <div>
 <h3 id="剪切动画">剪切动画</h3>
 
-<p>本例中，我们使用{{domxref("WebGLRenderingContext.scissor()","scissor()")}} 和 {{domxref("WebGLRenderingContext.clear()","clear()")}}。我们再次建立一个动画循环使用计时器。注意,这次是方块的位置(剪切区)更新每一帧(我们设置帧率大约每17毫秒，约60 fps -帧每秒)</p>
+<p>本例中，我们使用{{domxref("WebGLRenderingContext.scissor()","scissor()")}} 和 {{domxref("WebGLRenderingContext.clear()","clear()")}}。我们再次建立一个动画循环使用计时器。注意，这次是方块的位置 (剪切区) 更新每一帧 (我们设置帧率大约每 17 毫秒，约 60 fps -帧每秒)</p>
 
-<p>相比之下，方块的颜色(用{{domxref("WebGLRenderingContext.clearColor()","clearColor")}})仅创建一个新的方块。这是一个很好的演示{{Glossary("WebGL")}}是一个状态机。对于每一个方块，我们设置它的颜色,然后只更新它的位置每一帧。WebGL的清晰的颜色状态维持在设定值,直到我们再次改变它创建一个新的方块。</p>
+<p>相比之下，方块的颜色 (用{{domxref("WebGLRenderingContext.clearColor()","clearColor")}}) 仅创建一个新的方块。这是一个很好的演示{{Glossary("WebGL")}}是一个状态机。对于每一个方块，我们设置它的颜色，然后只更新它的位置每一帧。WebGL 的清晰的颜色状态维持在设定值，直到我们再次改变它创建一个新的方块。</p>
 </div>
 
 <div id="scissor-animation-source">