WebGL

WebGL之shaderToy初使用

做圖形就要玩shader,我的shader進階之路,從學習怎麼使用shaderToy開始。首先介紹我是看哪篇文章學習的,給出參考文章地址:https://blog.csdn.net/xufeng0991/ar

在WebGL場景中建立遊戲規則

在前三篇文章的基礎上,為基於Babylon.js的WebGL場景添加了類似戰棋遊戲的基本操作流程,包括從手中選擇單位放入棋盤、顯示單位具有的技能、選擇技能、不同單位通過技能進行互動、處理互動結果以及進入下一回合

WebGL模型拾取——射線法二

這篇文章是對射線法raycaster的補充,上一篇文章主要講的是raycaster射線法拾取模型的原理,而這篇文章著重講使用射線法要注意的地方。首先我們來看下圖。 我來解釋一下上圖中的origin

WebGL模型拾取——射線法

今天要把WebGL中一個非常重要的演算法記錄下來——raycaster射線法拾取模型。首先我們來了解一下為什麼要做模型拾取,我們在做webgl場景互動的時候經常要選中場景中的某個模型,比如滑鼠拖拽旋轉,平移。為

半小時輕鬆玩轉WebGL濾鏡技術系列(二)

上個章節中,我們主要從如何繪製圖片和如何新增濾鏡以及動態控制濾鏡效果兩方面入手,輔助以灰度濾鏡和對比度濾鏡的案例,讓大家對webgl濾鏡開發有了初步的認識,也見識到了glsl語言的一些特性。如果你覺得上面兩個濾

WebGL之3D地球

看了餓了麼小小倩老師的canvas作品,心血來潮,學著做了個3D地球,也算是入坑WebGL了吧。之前有用過原生的canvas畫2D的圖形,這次則是用了Three.js和stats.js的3D框架,邊學邊練手,效

寫 Shader 轉場的幾點思考

轉場效果在視訊編輯工具中最為常見,在兩段視訊或影象之間增加一個「過渡」的效果,可以讓整個過程更佳柔滑自然。常見的轉場如漸變過渡、旋轉、擦除等(下圖為 iMovie 自帶轉場): 而且現在

WebGL Shader 環境搭建

正如《WebGL 程式設計指南》中所說的: 傳統的三維圖形程式通常使用 C 或 C++ 等語言開發,併為特定的平臺被編譯成二進位制的可執行檔案。這意味著程式不能跨平臺執行。相比之下,WebGL 程式由 HT

飛一般的WebGL之唱起3D程式設計前的戰歌

計算機圖形的最初形式就是在一塊麵板上閃爍的燈。 從上圖可以推出“燈泡程式設計”大致過程是:程式員先對這些機器程式設計,然後閱讀機器的計算結果,最後將計算結果通過很多燈泡的亮滅組合來向計算

Mozilla工程師展示如何將WebGL應用移植到WebVR

在數個月前,我將一款Pathfinder演示應用程式移植到WebVR。那是一次有趣的經歷,而我感覺自己在將WebGL應用移植到WebVR的過程中學到了一推事情。我認為這些經驗教訓應該會對大家有所幫助,尤其是缺乏

1716170063.7025