From 93bf61c1896eb70c9bc461c472b011e959362aca Mon Sep 17 00:00:00 2001 From: allo Date: Thu, 8 Dec 2022 14:24:46 +0800 Subject: [PATCH] chore: remove {{WebGLSidebar}} macro from l10n-zh --- .../web/api/webgl_api/basic_2d_animation_example/index.md | 2 +- files/zh-cn/web/api/webgl_api/constants/index.md | 2 +- files/zh-cn/web/api/webgl_api/data/index.md | 2 +- files/zh-cn/web/api/webgl_api/index.md | 4 ++-- .../zh-cn/web/api/webgl_api/matrix_math_for_the_web/index.md | 2 +- .../tutorial/adding_2d_content_to_a_webgl_context/index.md | 2 +- .../webgl_api/tutorial/animating_objects_with_webgl/index.md | 2 +- .../webgl_api/tutorial/animating_textures_in_webgl/index.md | 2 +- .../tutorial/creating_3d_objects_using_webgl/index.md | 2 +- .../webgl_api/tutorial/getting_started_with_webgl/index.md | 2 +- files/zh-cn/web/api/webgl_api/tutorial/index.md | 2 +- .../web/api/webgl_api/tutorial/lighting_in_webgl/index.md | 2 +- .../tutorial/using_shaders_to_apply_color_in_webgl/index.md | 2 +- .../api/webgl_api/tutorial/using_textures_in_webgl/index.md | 2 +- files/zh-cn/web/api/webgl_api/types/index.md | 2 +- files/zh-cn/web/api/webgl_api/using_extensions/index.md | 2 +- files/zh-cn/web/api/webgl_api/webgl_best_practices/index.md | 2 +- .../web/api/webgl_api/webgl_model_view_projection/index.md | 2 +- files/zh-tw/web/api/webgl_api/index.md | 2 +- .../tutorial/adding_2d_content_to_a_webgl_context/index.md | 2 +- .../webgl_api/tutorial/animating_objects_with_webgl/index.md | 2 +- .../webgl_api/tutorial/getting_started_with_webgl/index.md | 2 +- files/zh-tw/web/api/webgl_api/tutorial/index.md | 2 +- .../tutorial/using_shaders_to_apply_color_in_webgl/index.md | 2 +- 24 files changed, 25 insertions(+), 25 deletions(-) diff --git a/files/zh-cn/web/api/webgl_api/basic_2d_animation_example/index.md b/files/zh-cn/web/api/webgl_api/basic_2d_animation_example/index.md index ee155671a5bc2a..22485bdd1e4691 100644 --- a/files/zh-cn/web/api/webgl_api/basic_2d_animation_example/index.md +++ b/files/zh-cn/web/api/webgl_api/basic_2d_animation_example/index.md @@ -3,7 +3,7 @@ title: 一个 2D WebGL 动画的基础示例 slug: Web/API/WebGL_API/Basic_2D_animation_example --- -{{WebGLSidebar}} +{{DefaultAPISidebar("WebGL")}} 在这个 WebGL 示例中,我们创建一个画布,并在其中使用 WebGL 渲染旋转正方形。我们用来表示场景的坐标系与画布的坐标系相同。也就是说,(0, 0)这个坐标在左上角,右下角是坐标在(600, 460)。 diff --git a/files/zh-cn/web/api/webgl_api/constants/index.md b/files/zh-cn/web/api/webgl_api/constants/index.md index 51b18e3f1e51d2..aea033168c90dc 100644 --- a/files/zh-cn/web/api/webgl_api/constants/index.md +++ b/files/zh-cn/web/api/webgl_api/constants/index.md @@ -3,7 +3,7 @@ title: WebGL 相关常量 slug: Web/API/WebGL_API/Constants --- -{{WebGLSidebar}} +{{DefaultAPISidebar("WebGL")}} [WebGL API](/zh-CN/docs/Web/API/WebGL_API) 提供了一些常量,这些常量常作为参数传入函数调用,或常作为函数的返回值。所有这些常量都是 {{domxref("GLenum")}} 类型。 diff --git a/files/zh-cn/web/api/webgl_api/data/index.md b/files/zh-cn/web/api/webgl_api/data/index.md index 3027c063819233..fb18b28ed01af1 100644 --- a/files/zh-cn/web/api/webgl_api/data/index.md +++ b/files/zh-cn/web/api/webgl_api/data/index.md @@ -3,7 +3,7 @@ title: Data in WebGL slug: Web/API/WebGL_API/Data --- -{{WebGLSidebar}} +{{DefaultAPISidebar("WebGL")}} GLSL 为 Shader 提供了三种不同作用的数据存储,每种都有一个特定的用例。每种数据依作用不同可以被一种或者全部 shader 访问(取决于数据存储类型),也可能通过站点的 Javascript 代码进行访问,这取决于变量的特定类型。 diff --git a/files/zh-cn/web/api/webgl_api/index.md b/files/zh-cn/web/api/webgl_api/index.md index df2412488bc74f..88b10d110a51f0 100644 --- a/files/zh-cn/web/api/webgl_api/index.md +++ b/files/zh-cn/web/api/webgl_api/index.md @@ -3,9 +3,9 @@ title: WebGL slug: Web/API/WebGL_API --- -{{WebGLSidebar}} +{{DefaultAPISidebar("WebGL")}} -WebGL(Web 图形库)是一个 JavaScript API,可在任何兼容的 Web 浏览器中渲染高性能的交互式 3D 和 2D 图形,而无需使用插件。WebGL 通过引入一个与 OpenGL ES 2.0 非常一致的 API 来做到这一点,该 API 可以在 HTML5 {{HTMLElement("canvas")}}元素中使用。这种一致性使 API 可以利用用户设备提供的硬件图形加速。 +WebGL(Web 图形库)是一个 JavaScript API,可在任何兼容的 Web 浏览器中渲染高性能的交互式 3D 和 2D 图形,而无需使用插件。WebGL 通过引入一个与 OpenGL ES 2.0 非常一致的 API 来做到这一点,该 API 可以在 HTML5 {{HTMLElement("canvas")}} 元素中使用。这种一致性使 API 可以利用用户设备提供的硬件图形加速。 目前支持 WebGL 的浏览器有:[Firefox](/zh-CN/Firefox) 4+, [Google Chrome](http://www.google.com/chrome/) 9+, [Opera](http://www.opera.com/) 12+, [Safari](http://www.apple.com/safari/) 5.1+, [Internet Explorer](http://windows.microsoft.com/en-us/internet-explorer/browser-ie) 11+ 和 [Microsoft Edge](https://www.microsoft.com/en-us/edge) build 10240+;然而,WebGL 一些特性也需要用户的硬件设备支持。 diff --git a/files/zh-cn/web/api/webgl_api/matrix_math_for_the_web/index.md b/files/zh-cn/web/api/webgl_api/matrix_math_for_the_web/index.md index eb4800f10f9dab..fb82bedd3b7295 100644 --- a/files/zh-cn/web/api/webgl_api/matrix_math_for_the_web/index.md +++ b/files/zh-cn/web/api/webgl_api/matrix_math_for_the_web/index.md @@ -3,7 +3,7 @@ title: Matrix math for the web slug: Web/API/WebGL_API/Matrix_math_for_the_web --- -{{WebGLSidebar}} +{{DefaultAPISidebar("WebGL")}} 矩阵可以用于表示空间中的对象的变换,并且是 Web 页面可视化的重要工具。本文探索如何创建并配合[CSS3 变换](/zh-CN/docs/Web/Guide/CSS/Using_CSS_transforms)和 matrix3d 变换类型使用矩阵。 diff --git a/files/zh-cn/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md b/files/zh-cn/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md index d08e8f218aa7e5..daf1430525e779 100644 --- a/files/zh-cn/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md +++ b/files/zh-cn/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md @@ -3,7 +3,7 @@ title: 使用 WebGL 创建 2D 内容 slug: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context --- -{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}} +{{DefaultAPISidebar("WebGL")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}} 一旦创建 WebGL 上下文创建成功,你就可以在这个上下文里渲染画图了。而对我们而言最简单的事,莫过于绘制一个没有纹理的 2D 图形了。那就让我们从画出一个正方形开始吧。 diff --git a/files/zh-cn/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.md b/files/zh-cn/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.md index bcbd4357d2383a..3d3f93acf5d093 100644 --- a/files/zh-cn/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.md +++ b/files/zh-cn/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.md @@ -3,7 +3,7 @@ title: 用 WebGL 让目标动起来 slug: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL --- -{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }} +{{DefaultAPISidebar("WebGL")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }} 在此示例中,我们实际上将旋转正方形平面。 diff --git a/files/zh-cn/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.md b/files/zh-cn/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.md index 19edba8f255eb9..fe27e5d4a55a92 100644 --- a/files/zh-cn/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.md +++ b/files/zh-cn/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.md @@ -3,7 +3,7 @@ title: 动画纹理 slug: Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL --- -{{WebGLSidebar("Tutorial") }} {{Previous("Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}} +{{DefaultAPISidebar("WebGL")}} {{Previous("Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}} 在本演示中,我们以上一个示例为基础,将静态纹理替换为正在播放的 mp4 视频文件的帧。实际上,这很容易做到,而且观看起来很有趣,所以让我们开始吧。您可以使用类似的代码来使用任何类型的数据(例如 {{ HTMLElement("canvas") }}) 作为纹理的源。 diff --git a/files/zh-cn/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.md b/files/zh-cn/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.md index 5d8fd43bbc65d7..990b214cee42d2 100644 --- a/files/zh-cn/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.md +++ b/files/zh-cn/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.md @@ -3,7 +3,7 @@ title: Creating 3D objects using WebGL slug: Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL --- -{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}} +{{DefaultAPISidebar("WebGL")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}} 现在让我们给之前的正方形添加五个面从而可以创建一个三维的立方体。最简单的方式就是通过调用方法 {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}} 使用顶点数组列表来替换之前的通过方法{{domxref("WebGLRenderingContext.drawArrays()", "gl.drawArrays()")}} 直接使用顶点数组。而顶点数组列表里保存着将会被引用到一个个独立的顶点。 diff --git a/files/zh-cn/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md b/files/zh-cn/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md index 437c1c50c52ca9..b8a6aece756072 100644 --- a/files/zh-cn/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md +++ b/files/zh-cn/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md @@ -3,7 +3,7 @@ title: 初识 WebGL slug: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL --- -{{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}} +{{DefaultAPISidebar("WebGL")}} {{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}} [WebGL](http://www.khronos.org/webgl/) 使得在支持 HTML 的 [`canvas`](/zh-CN/HTML/Canvas) 标签的浏览器中,不需要安装任何插件,便可以使用基于 [OpenGL ES](http://www.khronos.org/opengles/) 2.0 的 API 在 canvas 中进行 2D 和 3D 渲染。WebGL 程序包括用 JavaScript 写的控制代码,以及在图形处理单元(GPU, Graphics Processing Unit)中执行的着色代码(GLSL,注:GLSL 为 OpenGL 着色语言)。WebGL 元素可以和其他 HTML 元素混合使用,并且可以和网页其他部分或者网页背景结合起来。 diff --git a/files/zh-cn/web/api/webgl_api/tutorial/index.md b/files/zh-cn/web/api/webgl_api/tutorial/index.md index 3e4294b41cf4f0..78ec04c637914b 100644 --- a/files/zh-cn/web/api/webgl_api/tutorial/index.md +++ b/files/zh-cn/web/api/webgl_api/tutorial/index.md @@ -3,7 +3,7 @@ title: WebGL 教程 slug: Web/API/WebGL_API/Tutorial --- -{{WebGLSidebar}} +{{DefaultAPISidebar("WebGL")}} [WebGL](http://www.khronos.org/webgl/) 使得网页在支持 HTML {{HTMLElement("canvas")}} 标签的浏览器中,不需要使用任何插件,便可以使用基于 [OpenGL ES](http://www.khronos.org/opengles/) 2.0 的 API 在 canvas 中进行 3D 渲染。WebGL 程序由 javascript 的控制代码,和在计算机的图形处理单元(GPU, Graphics Processing Unit)中执行的特效代码 (shader code,渲染代码) 组成。WebGL 元素可以和其他 HTML 元素混合,并且会和页面的其他部分或页面背景相合成。 diff --git a/files/zh-cn/web/api/webgl_api/tutorial/lighting_in_webgl/index.md b/files/zh-cn/web/api/webgl_api/tutorial/lighting_in_webgl/index.md index 276f21c57b1b20..4ea1a0a1ffa892 100644 --- a/files/zh-cn/web/api/webgl_api/tutorial/lighting_in_webgl/index.md +++ b/files/zh-cn/web/api/webgl_api/tutorial/lighting_in_webgl/index.md @@ -3,7 +3,7 @@ title: Lighting in WebGL slug: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL --- -{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL", "Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL")}} +{{DefaultAPISidebar("WebGL")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL", "Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL")}} 在使用灯光之前,首先我们需要了解,与定义更广泛的 OpenGL 不同,WebGL 并没有继承 OpenGL 中灯光的支持。所以你只能由自己完全得控制灯光。幸运得是,这也并不是很难,本文接下来就会介绍完成灯光的基础。 diff --git a/files/zh-cn/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.md b/files/zh-cn/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.md index b2e3bb57889f4a..622e281929bd05 100644 --- a/files/zh-cn/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.md +++ b/files/zh-cn/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.md @@ -3,7 +3,7 @@ title: 使用着色器将颜色应用于 WebGL slug: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL --- -{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}} +{{DefaultAPISidebar("WebGL")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}} 在[之前的展示](/zh-CN/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context)中我们已经创建好了一个正方形,接下来我们要做的就是给它添加一抹色彩。添加颜色可以通过修改着色器来实现。 diff --git a/files/zh-cn/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md b/files/zh-cn/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md index 76d5cf7e27f111..aacb1733eb8284 100644 --- a/files/zh-cn/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md +++ b/files/zh-cn/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md @@ -3,7 +3,7 @@ title: Using textures in WebGL slug: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL --- -{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}} +{{DefaultAPISidebar("WebGL")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}} 现在我们已经创建好了一个可以旋转的 3D 的立方体,接下来是时候使用贴图来代替每个面的单一的颜色了。 diff --git a/files/zh-cn/web/api/webgl_api/types/index.md b/files/zh-cn/web/api/webgl_api/types/index.md index b89e0bcc85e806..79aaff26b45da9 100644 --- a/files/zh-cn/web/api/webgl_api/types/index.md +++ b/files/zh-cn/web/api/webgl_api/types/index.md @@ -3,7 +3,7 @@ title: WebGL types slug: Web/API/WebGL_API/Types --- -{{WebGLSidebar}} +{{DefaultAPISidebar("WebGL")}} 以下是[WebGL](/zh-CN/docs/Web/API/WebGL_API)提供的接口中用到的变量类型。 diff --git a/files/zh-cn/web/api/webgl_api/using_extensions/index.md b/files/zh-cn/web/api/webgl_api/using_extensions/index.md index 585ef0af3e0bfe..acb7cf8bb9fd90 100644 --- a/files/zh-cn/web/api/webgl_api/using_extensions/index.md +++ b/files/zh-cn/web/api/webgl_api/using_extensions/index.md @@ -3,7 +3,7 @@ title: Using WebGL extensions slug: Web/API/WebGL_API/Using_Extensions --- -{{WebGLSidebar}} +{{DefaultAPISidebar("WebGL")}} WebGL,像它的姐妹 API (OpenGL and OpenGL ES),支持使用扩展(extensions)。一份完整的扩展列表可在 [khronos webgl extension registry](http://www.khronos.org/registry/webgl/extensions/)。 diff --git a/files/zh-cn/web/api/webgl_api/webgl_best_practices/index.md b/files/zh-cn/web/api/webgl_api/webgl_best_practices/index.md index a5dd74f4ab663b..1520034963cf7f 100644 --- a/files/zh-cn/web/api/webgl_api/webgl_best_practices/index.md +++ b/files/zh-cn/web/api/webgl_api/webgl_best_practices/index.md @@ -3,7 +3,7 @@ title: WebGL best practices slug: Web/API/WebGL_API/WebGL_best_practices --- -{{WebGLSidebar}} +{{DefaultAPISidebar("WebGL")}} WebGL 是一个复杂的 API,通常我们不能明显的知道它的推荐使用方式。该页面涵盖了各种专业知识的建议,不仅仅是列举出什么该做,什么不该做,还有详细的解释为什么要这样做。你可以将本文档作为指导你选择的方法,确保你无论在何种浏览器以及硬件上都使用了正确的技巧。 diff --git a/files/zh-cn/web/api/webgl_api/webgl_model_view_projection/index.md b/files/zh-cn/web/api/webgl_api/webgl_model_view_projection/index.md index f1284132133c50..feb72939271074 100644 --- a/files/zh-cn/web/api/webgl_api/webgl_model_view_projection/index.md +++ b/files/zh-cn/web/api/webgl_api/webgl_model_view_projection/index.md @@ -3,7 +3,7 @@ title: WebGL model view projection slug: Web/API/WebGL_API/WebGL_model_view_projection --- -{{WebGLSidebar}} +{{DefaultAPISidebar("WebGL")}} 本文探讨如何在 WebGL 项目中获取数据,并将其投影到适当的空间以在屏幕上显示。它假定了你具备用于平移,缩放和旋转的基本矩阵数学知识。它解释了组成 3D 场景时通常使用的三个核心矩阵:模型,视图和投影矩阵。 diff --git a/files/zh-tw/web/api/webgl_api/index.md b/files/zh-tw/web/api/webgl_api/index.md index d7bb09a1ce6454..e445bb8a69595d 100644 --- a/files/zh-tw/web/api/webgl_api/index.md +++ b/files/zh-tw/web/api/webgl_api/index.md @@ -3,7 +3,7 @@ title: WebGL slug: Web/API/WebGL_API --- -{{WebGLSidebar}} +{{DefaultAPISidebar("WebGL")}} WebGL (Web Graphics Library) 是一個透過瀏覽器渲染 3D 及 2D 圖像的 JavaScript API ,且不需要安裝任何插件。 WebGL 透過與 OpenGL ES 2.0 緊密連結的 API,將 3D 圖像帶入 HTML5 中,並可透過 canvas 元素呈現於瀏覽器中 diff --git a/files/zh-tw/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md b/files/zh-tw/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md index ea93d1a9ececd5..2bbee715b612cd 100644 --- a/files/zh-tw/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md +++ b/files/zh-tw/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md @@ -3,7 +3,7 @@ title: 增加一個 2D 物件到 WebGL 環境 slug: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context --- -{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}} +{{DefaultAPISidebar("WebGL")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}} 當你[建立了 WebGL 的 context](/zh-TW/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL)後,便可開始渲染。最簡單的例子就是加入一個普通的正方形。接下來,我們會介紹如何畫一個正方形。 diff --git a/files/zh-tw/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.md b/files/zh-tw/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.md index d09f7f9c1d44b2..3b44cdfd796a55 100644 --- a/files/zh-tw/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.md +++ b/files/zh-tw/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.md @@ -3,7 +3,7 @@ title: 利用 WebGL 產生動畫 slug: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL --- -{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }} +{{DefaultAPISidebar("WebGL")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }} 這個章節中,我們將示範如何旋轉之前的正方形平面。 diff --git a/files/zh-tw/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md b/files/zh-tw/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md index c1a01ed8dccad5..9f0a92578169bd 100644 --- a/files/zh-tw/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md +++ b/files/zh-tw/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md @@ -3,7 +3,7 @@ title: WebGL 入門 slug: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL --- -{{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}} +{{DefaultAPISidebar("WebGL")}} {{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}} [WebGL](http://www.khronos.org/webgl/) 讓網頁內容能藉由一種基於 [OpenGL ES](http://www.khronos.org/opengles/) 2.0 的 API 的幫助,於支援此 API 的瀏覽器環境中,不需使用外掛程式就能在 HTML 的 [`canvas`](/zh-TW/docs/Web/API/Canvas_API) 元素中實現二維及三維渲染。 WebGL 程式包含了由 JavaSrcipt 及著色器(GLSL)撰寫的控制碼以及在電腦的圖形處理器( GPU )上執行的特效程式碼(著色器程式碼)。WebGL 元素可以加入其他 HTML 元素之中並與網頁或網頁背景的其他部分混合。 diff --git a/files/zh-tw/web/api/webgl_api/tutorial/index.md b/files/zh-tw/web/api/webgl_api/tutorial/index.md index 342a5a4e32a897..70f703fdbc99b8 100644 --- a/files/zh-tw/web/api/webgl_api/tutorial/index.md +++ b/files/zh-tw/web/api/webgl_api/tutorial/index.md @@ -3,7 +3,7 @@ title: WebGL tutorial slug: Web/API/WebGL_API/Tutorial --- -{{WebGLSidebar}} +{{DefaultAPISidebar("WebGL")}} [WebGL](http://www.khronos.org/webgl/) 讓網頁內容可以使用一個基於 [OpenGL ES](http://www.khronos.org/opengles/) 2.0 的 API 以在 HTML {{HTMLElement("canvas")}}中執行 3D 渲染,且瀏覽器無需使用任何 plug-in。WebGL programs 由 JavaScript 撰寫的指令碼以及透過電腦的 Graphics Processing Unit (GPU)上運行的特殊效果程式碼(shader code)組成。WebGL 元件可與其他 HTML 元件混合,並與該頁的其他部分或該頁背景組合使用。 diff --git a/files/zh-tw/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.md b/files/zh-tw/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.md index 132297396337ff..f2412ada908de2 100644 --- a/files/zh-tw/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.md +++ b/files/zh-tw/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.md @@ -3,7 +3,7 @@ title: 使用 shaders 在 WebGL 上色 slug: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL --- -{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}} +{{DefaultAPISidebar("WebGL")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}} [上一篇](/zh-TW/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context)我們建立了一個正方形平面,接下來我們要透過修改 shakder 來加入顏色。