原创 使用threejs點雲秀出酷炫的圖片效果(一)
最近做項目很忙，好久沒寫博客了，前幾天看到騰訊回憶時光的一個頁面，使用了點雲拼湊出了照片輪播十分有趣，於是我想用threejs實現這個效果。 首先這件事情分爲兩步：1.根據圖片數據創建對應大小、顏色的點雲。
2020-06-16 14:27:14
16
原创 對着色器代碼與紋理圖優化的一些體會
在以前的項目中寫了這麼多着色器，以及最近看一些書籍，對着色器的優化有了一些自己的體會，在這裏總結一下。 一.儘量將複雜的計算放在頂點着色器中計算： 頂點着色器在渲染過程中對物體的每個頂點執行
2020-06-16 14:27:14
2
原创 基於threejs開發的卡通風格着色器
作爲一個大學一直在玩3D的同學，還是應該多寫寫關於3D的東西，正好把原來做得着色器整理整理，供大家參考也供自己以後回顧吧~ 一般的現實中的物體講求一個平滑着色，能夠使其看起來更加真實，而卡通風格的物體則是讓
2020-06-16 14:27:14
6
原创 用Canvas畫漫天繁星吧~
初學Canvas寫了一個在一片區域內隨機產生星星並且不斷閃動的效果。具體實現如下所示。 首先創建一個canvas讓其適配屏幕的大小。 h = screen.height - 200; w = screen.wid
2020-06-16 14:27:14
2
原创 對threejs官方案例webgl_kinect的思考
在上次按照自己的想法使用粒子系統對圖片進行處理之後，我最近又看到了官方案例中，使用粒子使視頻呈現出3D效果，既然是官方案例就需要仔細研究一下。 這是該案例的實現效果：可以看到屏幕中由粒子構成了一個人在整理桌面的東西，效果十分的酷炫，大家可
2020-06-16 14:27:14
原创 webgl——混合與模板測試
今天研究了一個混合與模板測試相結合的案例，這裏做以總結。 案例中一個籃球在地板上不斷彈起並且落下，這裏主要涉及到了兩項技術：混合與模板測試。首先籃球在地板上反射出來的鏡像籃球就是通過混合技術實現的，爲了讓
2020-06-16 14:27:14
原创 基於threejs開發的卡通風格着色器（二）
上次給球體添加了卡通風格着色器之後覺得還少些什麼，仔細觀察網上卡通風格的遊戲發現，卡通風格的3D任務往往除了明顯不平滑過渡的色塊以外，還都有着黑色描邊，這次我們就來修改着色器實現描邊的效果。 描邊特效可以
2020-06-16 14:27:14
4
原创 在threejs中對3D物體旋轉的思考
今天在寫threejs時，突然想到一個問題：一個3D物體需要旋轉時，一般情況下簡單的旋轉我都是使用歐拉角，稍微複雜一些的情況我會把歐拉角轉換成四元數進行旋轉（歐拉角複雜旋轉可能會產生的死鎖問題），但是在threejs中ob
2020-06-16 14:27:14
原创 使用css3實現翻書效果（一）
最近在網頁上看到一個使用CSS3製作的很有趣的樣式，通過純css3的使用實現翻書的效果，作爲初學者的我決定實現一下該效果~該網站特效如圖所示： 是不是感覺特效非常棒，直接使用css樣式而不使用圖片大大減少了加載速度，也降低了用戶流量的
2020-02-23 20:00:21
原创 使用threejs點雲秀出酷炫的圖片效果(二)
上一次使用粒子系統，通過改變每一個粒子的位置和顏色構成了一副圖片，這次我們使用批量操作粒子移動構成放映機的效果。 首先需要控制每一個粒子移動，每一個粒子就需要兩套位置，第一個位置是起始時粒子所在的位置，第二個位置時結束時粒子所在的位置。爲
2020-02-23 20:00:21
原创 使用CSS3實現翻書效果（二）
原來一直使用QQ直接登錄的博客，今天綁定了一下郵箱，原來的博客全沒了，只好把原來備份的博文重新發了一下，還好只有兩篇~ 昨天把css3實現翻書樣式的效果實現了大半，今天將其主體的樣式全部實現了，下面將進行說
2020-02-23 20:00:21
原创 webgl——實現物體描邊效果
終於把手頭的事結束了，可以有時間來研究研究技術~作爲一名3D開發人員，僅僅使用現有的引擎來開發項目不免有些浮於表面，多研究研究底層的實現更利於對3D開發整體的把控~於是我決定最近開始研究webgl一些特效的實現，希望能在秋
2020-02-23 20:00:21
原创 對DrawCall的理解
drawcall是CPU對底層圖形繪製接口的調用命令GPU執行渲染操作，渲染流程採用流水線實現，CPU和GPU並行工作，它們之間通過命令緩衝區連接，CPU向其中發送渲染命令，GPU接收並執行對應的渲染命令。 這裏drawcall影響繪製的
2020-02-23 20:00:21
原创 使用threejs離屏渲染實現高斯模糊效果
之前的博客裏我使用webgl實現了簡單的離屏渲染效果，最近在使用threejs庫開發項目的時候，想實現點擊物體高亮，背景物體虛化的效果。爲了實現這個效果，我決定將每幀渲染出來的圖片拿出來，進行一次高斯模糊，在把它貼到一個背
2018-09-04 00:35:13
原创 對OpenGLES2.0渲染管線的理解
在學習OpenGLES時，每一本書開始都會向我們介紹渲染管線，當我在開始學習它時，看這些東西完全不明白在說什麼，經過一段時間對3D程序的開發和研究現在對渲染管線也有了一些自己的理解。由於WebGL是基於OpenGLES2.
2018-09-04 00:35:13