1. 程式人生 > >WebGL glsl fragment 著色器實現的紋理動畫: 神祕海洋

WebGL glsl fragment 著色器實現的紋理動畫: 神祕海洋

glsl程式碼:

this.vshdCode = 
          "precision mediump float;"
          +"attribute vec3 a_vtx_pos;"
          +"attribute vec2 a_vtx_uv;"
          +"varying highp vec2 v_texUV;"
          +"uniform mediump vec2 u_Stage_size;"
          +"uniform float a_time;"
          +"varying float v_time;"
          +"void main()"
          +"{"
          +"  float px = 0.5 * u_Stage_size.x;"
          +"  float py = 0.5 * u_Stage_size.y;"
          +"  float kw = (2.0/u_Stage_size.x);"
          +"  float kh = (2.0/u_Stage_size.y);"
          +"  gl_Position = vec4((px + a_vtx_pos.x)* kw - 1.0, (py + a_vtx_pos.y) * kh - 1.0,0.0,1.0);"
          +"  v_texUV = a_vtx_uv;"
          +"  v_time = a_time;"
          +"}";
  this.fshdCode = 
            "precision mediump float;"
            +"uniform sampler2D uSampler;"
            +"varying highp vec2 v_texUV;"
            +"varying float v_time;"
            +"void main()"
            +"{"
            +"  vec2 puv = v_texUV;"
            +"  vec4 color = texture2D( uSampler, vec2(v_texUV.x + v_time * 0.01, v_texUV.y) );"
            +"  float f = pow(color.r,2.0);"
            +"  float rad = v_time * 0.05;"
            +"  float cosV = cos(rad);"
            +"	float sinV = sin(rad);"
            +"  float scale = 1.0 + cosV * 0.01;"
            +"  vec2 uvPos = vec2(puv.x - 0.5,puv.y - 0.5);"
            +"  puv.x = v_time * 0.1 + scale * (uvPos.x * cosV - uvPos.y*sinV);"
            +"  puv.y = scale * (uvPos.x * sinV + uvPos.y*cosV);"
            +"  vec4 scolor = texture2D( uSampler, puv );"
            +"  if((scolor.r * scolor.r) > 0.3)"
            +"  {"
            +"    color.bgr = color.rgb + scolor.rgb;"
            +"  }else{"
            +"     scolor.rgb = (1.0 - scolor.rgb);"
            +"  }"
            +"  color = texture2D( uSampler, vec2(cos(scolor.r * 3.0) * rad, scolor.g * scolor.g * rad * 3.0) ).bgra;"
            +"  color.rgb = color.rgb * color.rgb;"
            +"  gl_FragColor = color;"
            +"}";

相關推薦

WebGL glsl fragment 著色實現紋理動畫: 神祕海洋

glsl程式碼:this.vshdCode = "precision mediump float;" +"attribute vec3 a_vtx_pos;" +"attribute vec2 a_vtx_uv;"

GLSL著色實現多重紋理與幀緩衝物件(FBO)

還記得我前面幾篇部落格上寫的東西都是將紋理直接渲染到螢幕上,就是產生一個和紋理尺寸大小相同的視窗進行渲染,那麼渲染完了就正好完整的顯示了紋理圖案。但是在做數值計算的時候,一般是不需要輸出到螢幕上的,這就是今天我們要用到的幀快取。有了幀快取,我們的輸出不需要是螢幕了,而是直

【Shader特效7】磚頭牆壁紋理和排球紋理片元著色實現

磚頭牆壁紋理片元著色器實現(Shader特效7) 最近在研究一個使用片元著色器完成牆壁紋理和排球紋理的例子,在這裡進行總結一些演算法和開發過程。我都將我的程式碼放到了我的github上https://github.com/ModestBean/ShaderSam

基於計算著色實現BlendShape三維人臉表情動畫驅動

為什麼要用計算著色器呢? 因為人臉表情基模型頂點數實在是太多了,而且有不止一個模型,動畫越精細,表情基模型越多,這個時候僅僅用CPU計算顯然是不夠的,所以就開始上GPU了,平行計算。 直接上計算著色器的

GLSL著色語言)中的內建函式

x*y: 如果x和y都是向量,那麼該運算子進行的是逐分量的相乘計算;如果是矩陣相乘,那麼該運算子會返回一個線性相乘(線性代數中正常的矩陣乘法)的矩陣,而不是一個逐分量的相乘結果(如果想得到的是逐分量的相乘結果,那就需要使用matrixCompMult函式)。 dot(x,y

Unity3D之Material(材質、著色紋理)

常用 器) 物體 sha metal 顏色 需求 unity3d 偏移 Material(材質):物體的材質是指:“色彩”、“紋理”、“光滑度”、“透明度”、“反射率”、“折射率”、“發光度”等.................. Shader(著色器):專門用來渲染3D圖

【OpenGL4.0】GLSL-使用Uniform Block實現著色的資料共享

一、在GLSL中使用Uniform Block 在GLSL渲染語言中,我們經常採用緩衝區來儲存Uniform型的Block。 比如我們需要繪製下面這樣的效果: 在這裡我們繪製了一個圓,圓內部顏色和外部顏色不同,而且邊緣部分,顏色是平滑過渡的。 我們這樣來實現這一效果: 首

06 WebGL 著色程式語言GLSL ES的陣列

GLSL ES支援陣列型別。與JavaScript中的陣列不同的是,GLSL ES只支援一維陣列,而且陣列物件不支援pop()和push()等操作,建立陣列時也不需要使用new運算子。宣告陣列很簡單,值需要在變數名後加上中括號([])和陣列的長度。比如: float

glsl著色 光照和紋理計算 (有用!)

http://my.oschina.net/sweetdark/blog/214220 以下內容只針對GLSL1.20的版本進行說明的,有些內建的變數在1.20之後,已經被廢棄了。 初次實驗 每個頂點著色器都至少輸出一個裁剪空間的位置座標。光照、紋理座標的生成和其他

14 WebGL 著色程式語言GLSL ES的預處理指令

GLSL ES支援預處理指令。預處理指令用來在真正編譯之前對程式碼進行預處理,都以井號(#)開始。下面就是我們曾使用的預處理指令。 #ifdef GL_ES precision mediump float; #endif這段程式碼檢查了是否已經定義了GL_ES巨集,

PBR著色實現相關

在移動端實現PBR效果確實費了一些時間,看的是LearnOpenGL中的例子,但是對比的是unity3d中的效果,所以效果一直不太一樣,今天在有引擎經驗開發同事的查錯下,很快解決了問題,這裡記錄一下。   具體實現以後在聊。   參考連結: LearnOpenGL教程:連結 U

WebGL著色和Three.js自己定義後期處理著色

WebGL著色器和Three.js自己定義後期處理著色器 為了渲染出一個網格的最終影象,開發者需要準確的定義頂點、變換、材質、光源以及相機是如何相互作用並最終生成影象的。而承擔這個工作的就是著色器(shader)。著色器又稱作可程式設計著色器,它是一段原始碼,它實現了將網格畫素點投影

Shader2.0-頂點著色應用:波浪的實現

Shader中波浪的實現主要在於根據時間改變頂點著色器的頂點資訊,根據三角函式t=asin(bx+c)即可實現,具體見程式碼: Shader "Hidden/TestStruct" { Properties { _MainTex ("Texture", 2D) = "white" {

WebGL學習之從著色入門

Intro 不論是WebGL、OpenGL、OpenGL ES、Vulkan、DirectX,這些聽起來就十分“底層”、“高效能”、“難寫”的東西似乎是和我一個後端開發都沒什麼關係。(遠處傳來聲音:別tm擅自改臺詞!) 咳,迴歸正題。 我看了好多的 OpenGL 入門書,固定管線的比較好

Unity shader之頂點和片段著色Vertex and Fragment Shader

Unity shader中的頂點片面著色器是我們專案中使用次數最多的著色器,因此今天來簡單的學習一下VF Shader。 VF Shader的基本寫法如下: // Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with

【Shader特效6】膨脹效果頂點著色實現

膨脹效果頂點著色器的實現 說在開始: 最近使用頂點著色器開發了一個膨脹效果的例子,在這裡進行總結一些演算法和開發過程。我都將我的程式碼放到了我的github上https://github.com/ModestBean/ShaderSample。本人的知識有限,如

Unity Shader入門教程(二) :實現頂點和片元著色之間的通訊

這篇文章將介紹Pass{}內的程式碼的編寫。我們先看如下Unity Shader程式碼:(此文部分採自《unity shader入門精要》) 關於頂點著色器和片元著色器不懂的學習可以自行搜尋概念的意思,這裡就不介紹了。 Shader "Custom/myTest" {

WebGL切換著色 繪製不同物體

WebGL切換著色器 繪製不同物體 1、為何切換著色器 WebGL繪製不同的物體需要使用不同的著色器,每個著色器中可能有非常負責的邏輯以實現各種不同的效果。我們可以準備多個著色器,然後根據需要來切換使用它們。 2、如何實現切換著色器 為了切換著色器,首先建立多個著色器程式物件

怎麼在Android Studio 編輯OpenGL著色語言(GLSL)時關鍵字高亮智慧提示

    前言:      最近在學習OpenGL開發,OpenGL著色器語言(以下使用GLSL代替)開發,但是Android Studio中不支援關鍵字高亮和智慧提示,所以就想有沒有一款類似IDE的編輯器來寫GLSL程式碼。一通的百度,發現大部分都是在VS中對其提供外掛支援

WebGL著色繪製一個點

OpenGL ES著色器語言(GLSL ES) 1. 強型別語言 2. 內建變數 gl_Position(座標) gl_PointSize(尺寸) gl_FragColor(顏色) 3. gl_pointSize必須使用浮點型,gl_PointSize=10 會報錯,必須10.0這種格式