WebGL OpenGLWebGL 3DWebGL tutorialwebgl教學webgl遊戲canvas.getcontext is not a functionCanvas WebGL

WebGL 入門- Web APIs

文章推薦指數： 80 %
投票人數：10人

在此我們做的第一件事是取得 canvas 元素的參考，並存入 canvas 變數中。

一旦我們取得了canvas ，我們透過呼叫 getContext 並傳入 "webgl" 字串來取得 ... SkiptomaincontentSkiptosearchSkiptoselectlanguage給開發者的網頁技術文件WebAPIsWebGLWebGLtutorialWebGL入門ArticleActions正體中文(繁體)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 準備三維渲染亦可參考WebGL入門 次頁» WebGL 讓網頁內容能藉由一種基於 OpenGL ES 2.0的API的幫助，於支援此API的瀏覽器環境中，不需使用外掛程式就能在HTML的 canvas 元素中實現二維及三維渲染。

WebGL程式包含了由JavaSrcipt及著色器(GLSL)撰寫的控制碼以及在電腦的圖形處理器(GPU)上執行的特效程式碼(著色器程式碼)。

WebGL元素可以加入其他HTML元素之中並與網頁或網頁背景的其他部分混合。

這篇文章將會向您介紹WebGL的基礎。

這篇文章假設您已經對於三維圖學涉及的數學有所了解，並且它將不會被佯裝為三維圖學的教材。

在我們的學習區域內有初學者指南讓你完成編程任務：LearnWebGLfor2Dand3Dgraphics. 在此教學文件中的程式碼範例都能在webgl-examplesGitHubrepository之中找到。

準備三維渲染首先你需要一個 canvas元素讓WebGL進行渲染。

下面的HTML定義的 canvas元素供後續的範例繪製。

準備WebGL背景資料 背景資料為Context翻譯而來 在下面的JavaScript程式碼，當指令完成讀取後會執行 main() 函式。

目的是為了設定WebGL 背景資料並且開始渲染內容。

main(); //從這開始 functionmain(){ constcanvas=document.querySelector("#glCanvas"); //初始化GLcontext constgl=canvas.getContext("webgl"); //當WebGL有效才繼續執行 if(gl===null){ alert("無法初始化WebGL，您的瀏覽器不支援。

"); return; } //設定清除色彩為黑色，完全不透明 gl.clearColor(0.0,0.0,0.0,1.0); //透過清除色來清除色彩緩衝區 gl.clear(gl.COLOR_BUFFER_BIT); } 在此我們做的第一件事是取得 canvas元素的參考，並存入 canvas變數中。

一旦我們取得了canvas，我們透過呼叫 getContext 並傳入 "webgl" 字串來取得 WebGLRenderingContext。

若瀏覽器不支援webgl getContext 會回傳 null 同時會顯示訊息給使用者並且離開。

如果成功初始化， gl 就會成為一個WebGL背景資料的參考。

在這裡我們設置清除色為黑色，並透過該色清除context(用背景色重新繪製canvas)。

至此，您已經有足夠初始化WebGL背景資料的程式碼，並且準備好了等待接收內容的容器。

檢視完整程式碼|開啟新頁面來檢視結果亦可參考 AnintroductiontoWebGL:由LuzCaballero撰寫，並出版在dev.opera.com。

這篇文章點出了WebGL的意義，解釋了其運作(包含渲染管路的觀念)，並介紹了一些WebGLlibraries。

WebGLFundamentals AnintrotomodernOpenGL:由JoeGroff撰寫的一系列關於OpenGL的好文章，提供了OpenGL清楚的簡介，從其歷史到重要的圖像管路概念，以及一些展示其原理的範例。

如果您完全不懂OpenGL，這將是一個好的入門介紹。

次頁» Foundaproblemwiththispage?EditonGitHubSourceonGitHubReportaproblemwiththiscontentonGitHubWanttofixtheproblemyourself?SeeourContributionguide.Lastmodified:2020年12月8日,byMDNcontributors

請為這篇文章評分？

延伸文章資訊