WebGL - 收藏集 - 掘金

圖解 WebGL&Three.js 工做原理 - 前端 - 掘金
「哥，你又來啦？」「是啊，我隨便逛逛。」 「別介啊……給我20分鐘，成不？」「5分鐘吧，我很忙的。」「不行，20分鐘，否則我真很難跟你講清楚。」「好吧……」「行，那進來吧，咱好好聊聊」   1、咱們講什麼？ 咱們講兩個東西：一、WebGL背後的工做原...

H5 動畫開發快車道 - 前端 - 掘金
janilychen ...

Threejs之二:相機詳解 - 掘金
透視投影相機(THREE.PerspectiveCamera) 所謂透視投影相機(PerspectiveCamera),基本等同於人的眼睛,意思就是:離的遠的物體會顯得比較小,近處的物體會比較大.透視投影相機的構造函數: PerspectiveCamera...

近期項目中用到的一些本身寫的或者整理而成的前端效果乾貨 - 前端 - 掘金
PUI總目錄 想查看源代碼，能夠自行F12，或在github中直接查看源碼，或者歡迎直接留言。 1、jQuery上下滾動抽獎效果 這jQuery插件主要是被使用到一些抽獎頁面。效果以下： 點擊查看 在線演示   2、JQ...

Threejs 入門教程 - 前端 - 掘金
簡介: Three.js是一個偉大的webGL開源庫,它簡化了瀏覽器3D編程,對webGL進行了封裝,使得開發者能夠直接使用JavaScript在瀏覽器中建立複雜多變的全景3D場景. Three.js官網:https://threejs.org/; Three...

HT for Web 自定義 3D 模型的 WebGL 應用 - 前端 - 掘金
有很多朋友詢問《HTML5 Web 客戶端五種離線存儲方式彙總》文章例子的3D表計模型是如何生成的，這個例子是經過導入3dmax設計好的表計模型，而後經過obj格式導入到HT for Web系統中進行控制，這種方式特別適合複雜模型的應用場景，但對於監控系統的很...

《穿越宇宙的邀請函》沒你想得那麼難 - 前端 - 掘金
前幾每天貓雙十一預熱頁面——《穿越宇宙的邀請函》，幾乎是迄今爲止移動端大型活動運營頁面中最炫酷的一個，狠狠地刷了一波朋友圈。若是還沒看過，能夠在移動端打開這個連接欣賞一下。這裏從技術角度對它進行一些比較詳細的分析。先上結論，這個頁面在實現上並不複雜，不論是技術...

Two.js - 前端 - 掘金
一個前端繪圖的工具，用統一的 API 來繪製 SVG / Canvas / WebGL 等圖像畫面。...

WebGL 實現雨水特效實驗 - 前端 - 掘金
示例 下載源碼 今天咱們將要和你們分享一些 WebGL 實驗，在這個實驗中咱們將建立一個很是逼真的雨滴效果，並把它放到不一樣的場景中去。在這篇文章中，咱們將給出製做這種效果所用到的一些通常性技術和技巧的概覽。 請注意：文中製做的效果還處於試驗階段，可能沒法在全部...

Sigma.js - 前端畫 Graph 工具 - 前端 - 掘金
一個基於 Canvas，WebGL 優化的前端畫圖工具，能夠展現 Graph 各類形態及交互動做...

超酷的 WebGL 水母動畫 - 前端 - 掘金
能夠旋轉視圖、放大縮小...

WebGL技術儲備指南 - 前端 - 掘金
WebGL 是 HTML 5 草案的一部分，能夠驅動 Canvas 渲染三維場景。WebGL 雖然還未有普遍應用，但極具潛力和想象空間。本文是我學習 WebGL 時梳理知識脈絡的產物，花點時間整理出來與你們分享。 示例WebGL 很酷，有如下 demos 爲證...

HTML5, CSS3, WebGL, SVG 動效庫 - 前端 - 掘金
一個 HTML5, CSS3, WebGL, SVG 動效庫...

[[翻譯] 圖形學祕籍的目錄 Real-Time Rendering3-- 圖像渲染管線 - 前端 - 掘金](https://juejin.im/entry/57844...
實現渲染最核心的組件是圖像渲染管線，也簡單的稱爲管線。它最主要的功能是在指定的虛擬攝像頭，3d對象，光源，陰影方程式，紋理等裏，生成或渲染出一張2d圖片。在這張生成圖裏，全部對象的座標和形狀都會受到它們自身幾何形狀，攝像頭擺放的位置，以及周圍環境的影響。而它們...

WebGL 繪製三角形 - 前端 - 掘金
在上一篇文章WebGL 初探中，咱們熟悉了 WebGL 的簡單背景以及如何繪製一個簡單的點。可是隻繪製點咱們是沒法進入三維世界的，本篇章將講解如何使用 WebGL 繪製三角形，由於不少 3D 圖形都是使用三角形爲基礎進行渲染的，因此有些對 GPU 性能指標的評...

一個採用 Three.js 的 3D 動畫場景製做：飛行者 - 前端 - 掘金
翻譯了這麼久～含淚終於！終於！終於！翻譯完人生第一篇譯文了.. 本文譯自：The Making of 「The Aviator」: Animating a Basic 3D Scene with Three.js 一篇關於探討使用 Three.js 建立 3D...

WebGL 初探 - 前端 - 掘金
目前，咱們有不少方案能夠快速的接觸到 WebGL 並繪製複雜的圖形，但最後發現咱們忽視了不少細節性的東西。固然，這對初學 WebGL 是有必要的，它能迅速提起咱們對 WebGL 的學習興趣。當學習到更加深刻的階段時，咱們更想了解 WebGL 的工做機制，這也將...

數百個 HTML5 例子學習 HT 圖形組件 – WebGL 3D 篇 - 前端 - 掘金
《數百個 HTML5 例子學習 HT 圖形組件 – 拓撲圖篇》一文讓讀者瞭解了 HT 的 2D 拓撲圖組件使用，本文將對 HT 的 3D 功能作個綜合性的介紹，以便初學者可快速上手使用 HT 構建例如電信網管 3D 機房應用、水務燃氣 SCADA 監控應用及智...

用 WebGl 加速 2D 渲染 - 前端 - 掘金
Introduction This is a library targets 2D hardware-acclerated graphic rendering. This is useful in data presentation scenario In...

WebGL - 片元着色器 0. 模板準備 - 前端 - 掘金
前面一段時間寫了三篇關於webgl入門的文章，先是講了下計算機圖形學簡介，再是成像原理，以及幾何對象和座標變換，感受本身講的很差，講的不夠入門。因此暫時組織一下文章節奏，好比幾何對象和座標轉換徹底能夠拆分下。成像原理徹底能夠講一下着色器。 在這個調整的...

WebGL - 片元着色器 1.Bloom 特效實現 - 前端 - 掘金
第一件事先上demo吧     Bloom特效 demo下載地址 ...

WebGL - 片元着色器 2. 灰度圖實現 - 前端 - 掘金
灰度圖 老規矩第一步上 demo demo下載地址 灰度圖定義 首先咱們看看什麼叫作灰度圖。可能你們會混淆一些東西，好比咱們之前的黑白電視機，實際上不是黑白的，而是有灰度的。 灰度圖： 灰度圖...

HTML5 的 WebGL 實現的 3D 和 2D 拓撲樹 - 前端 - 掘金在HT for Web中2D和3D應用都支持樹狀結構數據的展現，展示效果各異，2D上的樹狀結構在展示層級關係明顯，可是若是數據量大的話，看起來就沒那麼直觀，找到指定的節點比較困難，而3D上的樹狀結構在展示上配合HT for Web的彈力佈局組件會顯得比較直觀，...