WebGL tutorial - Web APIs | MDN

WebGL tutorial. WebGL 讓網頁內容可以使用一個基於 OpenGL ES 2.0 的API以在HTML 中執行3D渲染，且瀏覽器無需使用任何plug-in。

WebGL programs 由JavaScript ... SkiptomaincontentSkiptoselectlanguage給開發者的網頁技術文件WebAPIsWebGLWebGLtutorialArticleActions正體中文(繁體)ThispagewastranslatedfromEnglishbythecommunity.LearnmoreandjointheMDNWebDocscommunity.開始之前教學文件RelatedTopics WebGLAPI WebGLtutorial GettingstartedwithWebGL Adding2DcontenttoaWebGLcontext UsingshaderstoapplycolorinWebGL AnimatingobjectswithWebGL Creating3DobjectsusingWebGL UsingtexturesinWebGL LightinginWebGL AnimatingtexturesinWebGL Examplesandarticles Matrixmathfortheweb WebGLmodelviewprojection WebGLbestpractices UsingWebGLextensions Abasic2DWebGLanimationexample WebGLbyexample Interfaces WebGLRenderingContext(en-US) WebGL2RenderingContext(en-US) WebGLActiveInfo(en-US) WebGLBuffer(en-US) WebGLContextEvent(en-US) WebGLFramebuffer(en-US) WebGLProgram(en-US) WebGLQuery(en-US) WebGLRenderbuffer(en-US) WebGLSampler(en-US) WebGLShader(en-US) WebGLShaderPrecisionFormat(en-US) WebGLSync(en-US) WebGLTexture(en-US) WebGLTransformFeedback(en-US) WebGLUniformLocation(en-US) WebGLVertexArrayObject(en-US) Documentation: Contribute TheMDNproject 開始之前教學文件WebGLtutorial WebGL 讓網頁內容可以使用一個基於 OpenGL ES2.0的API以在HTML中執行3D渲染，且瀏覽器無需使用任何plug-in。

WebGLprograms由JavaScript撰寫的指令碼以及透過電腦的GraphicsProcessingUnit(GPU)上運行的特殊效果程式碼(shadercode)組成。

WebGL元件可與其他HTML元件混合，並與該頁的其他部分或該頁背景組合使用。

  本教學描述如何使用  元件描繪 WebGL圖像/圖形,從基礎開始。

提供的範例將讓你對於可以用WebGL做到什麼有清楚的概念，並提供程式碼片段讓你可以著手建立自己的內容。

開始之前使用元件不會非常困難，但你需要有對HTML 與 JavaScript 的基礎認識。

 元件跟WebGL在某些舊瀏覽器中不支援，但近來的每個主流瀏覽器都有支援。

我們用JavaScriptcontextobject在canvas繪製圖形，這樣圖形就能動態(onthefly)產生。

教學文件 WebGL新手上路 如何建置WebGL環境 加入2D內容至WebGL環境 如何用WebGL渲染簡單平面的形狀 使用shaders在WebGL上色 示範如何使用shaders在圖形上上色 WebGL產生動畫 示範如何旋轉與移動物件以製作簡單的動畫 建立三維物件 示範如何創造並讓3D物件(立方體)有動畫 在物件表面貼上材質 示範如何在物件的表面上貼上材質圖 模擬打光 如何在WebGL環境模擬打光效果 讓材質產生動畫 如何移動材質圖，在範例中是將Ogg影片貼到一個旋轉中的立方體 Foundaproblemwiththispage?EditonGitHubSourceonGitHubReportaproblemwiththiscontentonGitHubWanttofixtheproblemyourself?SeeourContributionguide.Lastmodified:Dec8,2020,byMDNcontributors