原创 Javascript調試命令——你只會Console.log() ?
Javascript調試命令——你只會Console.log() ? Console 對象提供對瀏覽器控制檯的接入（如：Firefox 的 Web Console）。不同瀏覽器上它的工作方式是不一樣的，但這裏會介紹一些大都會提供的接口特性
2020-06-23 08:50:39
1
原创 WebGL 由gl_FragCoord在FS中計算世界座標（渲染流水線矩陣變化的逆推）
今天有羣友在交流羣裏問，如何根據gl_FragCoord在片元座標中計算當前片元的世界座標，因爲能從頂點着色器傳遞到片元着色器，大家都沒有在意這件事情，晚上正好無事也進行了一番探索，這是一個矩陣變換的逆過程。渲染管線中矩陣變換
2020-06-23 08:50:39
10
原创 Three.js BIM模型輕量化 FPS渲染速率優化 多 實例渲染[Instance]+頂點合併[Merge]
BIM模型不經過處理，直接加載到Three.js 創建的場景中，很大可能會很使fps幀率下降，原因在於模型的個數太多，有的模型是多材質的話還需要在Three.js中繪製兩次，這樣會導致drawcall過載，雖然在開啓視椎體
2020-06-23 08:50:39
25
原创 頂點着色器插值輸出到片元着色器的三種方式—— flat、noperspective 、smooth（透視矯正）
以OpenGL爲例，在https://www.khronos.org/opengl/wiki/Type_Qualifier_(GLSL)上，可以看到三種插值的方式。 圖片截圖不是很清楚，就簡單說一下這幾種吧。 1. flat 該值不
2020-06-23 08:50:38
5
原创 Babylon.js 踩坑之正交攝像機,平行投影的相關設置
最近在研究Babylon.js這款專業Web3D的遊戲引擎，官網的教程很全面，但不免有些遺漏的地方。今天，就講Babylon.js中相機的投影類型。 Babylon.js中的相機類型有UniversalCa
2020-05-31 09:31:45
原创 WebGL 2.0實現Vertex Array Objects（VAO,頂點數組對象）
在WebGL 2.0中，終於把VAO轉正了。在WebGL 1.0中，可以通過拓展實現。Babylon.js引擎默認情況下，每次渲染都使用VAO完成。簡單介紹下VAO,下面截取自《OpenGLES 3.0 Programmin
2020-05-31 09:31:45
14
原创 WebGL矩陣變換總結（模型矩陣，視圖矩陣，投影矩陣）
矩陣變換總結（模型矩陣，視圖矩陣，投影矩陣） 最近在開發項目的時候，常常用到Three.js，用起來很方便。可是，當引擎迭代升級的時候，以前的很多的技巧，並不一定使用最新的引擎。我認爲應當對底層的原生AP
2020-05-31 09:31:45
原创 WebGL 2.0實現FrameBuffer Objects And RenderBuffer Objects 實現渲染到紋理，離屏渲染
WebGL 2.0 FrameBuffer And RenderBuffer 在學習WebGL過程中，有一種技術叫渲染到紋理，就是把每一幀畫面再次處理渲染，並最爲紋理
2020-05-31 09:31:45
原创 WebGL實現卡通風格着色器及物體描邊效果實現（非真實質感）
卡通風格着色器及描邊效果實現（基於WebGL 2.0實現） 在開發過程中，我們並不總是以真實效果作爲追求，最近在學習的過程中，看到了一些非真實質感的開發實現。本次帶來一個球體的卡通效果及描邊的demo。 先看一下效果圖：
2020-05-31 09:31:44
原创 重新開始！大前端+實時渲染+Al
大學裏做過App，做過JavaWeb，做過人臉識別，後來一直在做基於WebGL實時渲染的工作，中間我們同學四人幫老師寫過一本關於WebGL 2.0書，當時由於種種限制並未完全寫出WebGL 2.0新的圖形功能，像3D紋理，遮擋剔除等，
2020-05-31 09:31:44
1
原创 計算機圖形學視圖矩陣推導過程
視圖矩陣推導過程（Demo基於WebGL 2.0實現） 一、概述 首先，我們需要了解些概念： 攝像機座標系或者攝像機空間：物體經攝像機觀察後，進入攝像機空間。 視變化，是將世界座標系下的座標變化到攝像機座標系，視變換是通過乘以視圖矩陣實現
2020-05-31 09:31:44
1
原创 WebGL 中的 gl.drawArrays()與gl.drawElements() 你真的懂嗎？
哈哈，今天羣友又問了一個很有意思的問題，問gl.drawElements()如何使用，如何制定繪製的範圍，哈哈，很基礎的問題，但也難住了很多人，你也可以思考一下如何去實現，Three.js源碼拆分幾何體地時候就會用到這些api
2020-02-24 16:02:12
原创 Three .js 記錄一次給 three.js 提 pr 的經歷！！2020衝鴨！！
記一次給Three.js 提 pr 的經歷！！ 哈哈 在 Three.js r110的版本中，mrdoob 添加了InstancedMesh，在一次issue的討論中，有人提到想知道它具體的是哪個實例， 有人建議gpu pic
2020-02-24 16:02:12
原创 WebGPU 初探 - Windows10上Chorme運行WebGPU程序
WebGPU是最新的Web 3D圖形API，瀏覽器封裝了現代圖形API（Dx12、Vulkan、Metal)，這纔是未來的標準，不像 WebGL2.0 蘋果直接不支持，好，開始今天的分享； 點擊鏈接查看是否支持WebGPU 首先分
2020-02-24 16:02:02
13