WebGL 入門 – WebGL框架

2021-01-21 CSDN技術社區

大致理解了WebGL的原生API後,可以說對於完全不了解OpenGL或者三維設計的Web開發者來說是十分生澀難懂的。但是,也有很多人基於WebGL開發出了各種開源框架,現在,我們就來看看目前有哪些框架能夠為我們所用。

Three.js 

Three.js 是一個開源的JavaScript 3D引擎,該項目的目標是創建一個低複雜、輕量級的3D庫,用最簡單、直觀的方式封裝WebGL中的常用方法。目前由一個強大的貢獻團隊維護。

PhiloGL 

PhiloGL 是由Sencha 實驗室開發的一個新的WebGL開源框架,提供了強大的API,可幫助開發者輕鬆開發WebGL並整合到Web應用中,實現數據可視化,代碼。創作和遊戲開發。

Babylon.js

一個強大的3D遊戲引擎,由Microsoft的員工David Cathue主導開發。和Three.js相比,three.js更傾向於動畫,而Babylon.js則更適合遊戲開發。

SceneJS

SceneJS是一個開源的JavaScript 3D引擎,特別適合需要高精度細節的模型需求,比如工程學和醫學上常用的高精度模型。

x3dom 

X3DOM是一個實驗性的開源框架,它有一個原創的X3D元素,可以通過X3D插件、Flash或WebGL渲染。

CopperLicht 

這是一個「商業級別的WebGL 3D引擎和編輯器」,你可以免費使用,但是要想獲得未壓縮的完整版帶支持文檔的源碼和其他服務,則需要購買授權。

每個框架都有各自的特點,開發者可以根據自己的需求選擇最適合自己的框架。在接下來的幾章中,我們會使用Three.js作為3D引擎做示例,它是目前最受歡迎的WebGL框架。

在這麼多WebGL框架中應用最廣泛的,相關文檔資料最豐富的當數three.js莫屬了。

Three.js能做到什麼,來看看官網的案例,也許會讓你驚嘆不已。

Three.js完全開源,並且發展迅速,目前已經發展到了r63版本,你可以在GitHub 上找到完整的原始碼。

相關焦點

  • WebGL 入門-原生API介紹
    當前,大部分瀏覽器都使用語法 canvas.getContext("experimental-webgl") 來獲取 WebGLRenderingContext。//從Canvas中獲取上下文function initWebGL(canvas) {    var gl;    try {        gl = canvas.getContext("experimental-webgl") || canvas.getContext("webgl");    } catch (
  • webgl 迷宮項目開發總結
    收穫webgl 三個js庫webgl-utils.jswebgl-debug.jscuon-utils.js圖片加載var img = new Image();這樣可以防止webgl在渲染的時候圖片還沒加載完而出現黑屏的問題。監聽鍵盤事件保證事件代碼只運行一次。否則會重複綁定多個事件,也就是按鍵一次會觸發多次事件處理。
  • 八大瘋狂的 HTML5 Canvas 及 WebGL 動畫效果
    原文地址:http://favbulous.com/post/895/8-crazy-animations-withwebgl-and-html5-canvas文/hiwebgl
  • 如何在Internet Explorer 11中開啟WebGL
    目前IE 11對WebGL的支持度仍然非常有限,你可以把一下代碼另存為HTML文件,然後在IE 11中打開,你會發現網頁中出現一片藍色的區域,而這正代表著網頁成功獲得了名為「experimental-webgl」的3D繪製上下文——Internet Explorer 11終於支持WebGL了!
  • WebGL 3D程序開發
    http://webglsamples.org/ 這個網址展示了Google發布的一些示例WebGL程序,在驚嘆美輪美奐的效果的同時,我們發現發布和運行也變得非常簡單。下方運營:weikashouji
  • 令人激動的新興 Web 技術:WebGL和SVG
    http://dev.opera.com/articles/view/an-introduction-to-webgl/作者 Luz Caballero,簡介可以獲得的各種庫。  Raw WebGL 101。http://dev.opera.com/articles/view/raw-webgl-part1-getting-started/適合那些不使用庫的用戶。
  • WebGL 1.0標準規範正式公布 3D網際網路開啟
    WebGL 1.0正式版標準規範全文:http://www.khronos.org/registry/webgl/specs/latest/
  • webgl、Javascript、HTML、ThingJS、cesium都是什麼鬼?
    webgl——是一種3D繪圖協議,這種繪圖技術標準允許把JavaScript和OpenGL ES 2.0結合在一起,通過增加OpenGL ES 2.0的一個JavaScript綁定,WebGL可以為HTML5。Canvas提供硬體3D加速渲染,這樣Web開發人員就可以藉助系統顯卡來在瀏覽器裡更流暢地展示3D場景和模型了,還能創建複雜的導航和數據視覺化。
  • 基於webgl的三維室內空間邏輯建模 three.js ThingJS
    [ThingJS]是一款基於webgl的3D框架,比three.js更為頂層!能夠實現室內的交互、POI的顯示、樓層選擇及表達方式的切換,支持跨平臺多終端的應用,平臺自動設置場景光照效果,讓3D開發更加輕鬆,喜歡的點個讚再走哦~
  • 基於WebGL的虛擬太陽系漫遊技術實現 ThingJS 科幻片
    比起Three.js的開源技術探索者風格,ThingJS是更為頂層的封裝庫,ThingJS繼承了webgl的技術優點,並且提供了較為全面的物聯網開發邏輯(如地球、城市、建築、設備等等)。ThingJS開發特點如下:掩蓋了渲染細節。將 webGL原生API的細節抽象化,3D場景拆解為網格、材質和光源。面向對象。
  • WebGL 入門-WebGL簡介與3D圖形學
  • ThingJS:基於WebGL的3D技術在網頁中的運用
    三者的難度對比如下:ThingJS(框架)< Three.js(引擎)< WebGL(接口)3D繪圖標準 - WebGLWebGL是一種3D繪圖標準,通過結合Javascript和OpenGL ES 2.0,可以為HTML5的Canvas標籤提供硬體
  • 藉助WebGL三維可視化技術檢索3D動態圖像
    可視化數據信息的展示要通過客戶端和伺服器,客戶端發出請求時先通過模型框架,模型框架判斷用戶點擊事件,通過HTTP協議向伺服器發出請求。服務端接收到請求信息交由SSH框架進行處理,由框架向資料庫訪問數據,再把數據返回給客戶端,客戶端把數據填充到模型中,得到數據填充的模型要通過支持HTML5的瀏覽器渲染。
  • 最熱門的深度學習框架TensorFlow入門必備書籍
    其實,早在 2015 年底,谷歌就開源了內部使用的深度學習框架 TensorFlow 。眾多研究表明,Tensorflow 是研究深度學習的首選平臺。於是,很多開發者就問了,TensorFlow如此受歡迎,如果想入門學習它,要選擇哪本書呢?
  • Unity 遊戲框架搭建 2018 (三) QFramework 快速入門
    Unity 遊戲框架搭建 2018 (三) QFramework 快速入門 前言QFramework 開發至今已經三年了,到目前為止
  • 與WebGL一起遇見網頁的未來