前言
這兩天接到一個專案,是有關全屏視訊的,整個專案中分到我這兒最主要的部分就是結束頁要求3d賀卡展示,正巧和前幾天NingBo童鞋分享的一樣,乾脆點兒,這次搞個webGL版的。哈哈~
實現過程
專案地址 現在階段就是隻做了個基礎版,曲線動畫啥的都是小事兒。
20190427-現在加上了easebackout曲線方法,用的是d3-ease
感覺挺好用的,還有小花的飄動的邏輯,稍後會講解。。太餓了~吃飯去。哈哈
手指拖拽旋轉邏輯這個專案用不到,所以沒有新增
複製程式碼
ps:有沒有覺得chrome裡devtool不是這個介面啊~哈哈哈,最近在弄一個視覺化的工具
複製程式碼
言歸正傳,我們們接著往下進行:
webGL初始化(常規操作)
- 獲取 WebGLRenderingContext
const gl = canvas.getContext('webgl');
複製程式碼
- 編譯shader並把編譯好的shader附加到建立好的program中
//頂點著色器
const vertShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertShader,vertSource);//vertSource:著色器原始碼
gl.compileShader(vertShader);
//片元著色器
const fragShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragShader,fragSource);//fragSource:著色器原始碼
gl.compileShader(fragShader);
//program相關
const program = gl.createProgram();
gl.attachShader(program,vertShader); //附加頂點著色器
gl.attachShader(program,fragShader); //附加片元著色器
gl.linkProgram(program);
複製程式碼
3.因為賀卡是3d的所以要開啟深度測試
gl.enable(gl.DEPTH_TEST);
複製程式碼
4.因為元素不是模型而是一個個矩形,只是材質有的是透明的,在元素疊加時會把當前畫素覆蓋到緩衝中,比如顏色值(0,0,0,0)會覆蓋已有顏色(1,0,0,1),導致這個畫素不是你想要的紅色而是透明色。解決辦吧是開啟混合模式。
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
gl.enable(gl.BLEND);
複製程式碼
當然你如果確保每個元素都是jpg的話 可以不用開啟這個功能。
blendFunc 是定義混合方式,第一個引數是定義源畫素採取怎樣的處理,第二個引數是目標畫素(顏色緩衝區)採取怎樣的處理。
上面寫的函式的意思 最終畫素= 源畫素顏色*源透明度+緩衝區顏色*(1-源透明度)
複製程式碼
基本上初始化工作就完成了,下面來看下怎樣新增元素。
新增賀卡元素
先來附上shader原始碼
//vertSource
uniform mat4 uCameraMatrix;
uniform mat4 uTransformMatrix;
attribute vec3 aPosition;
attribute vec2 aUv;
varying vec2 vUv;
void main(){
const float scale = 1.0/1.6;
//這個矩陣不用管 我是懶得寫lookAt了 和lookAt的功能是一樣的
const mat4 viewAngle = mat4(
1,0,0,0,
0,cos(-.1),-sin(-.1),0,
0,sin(-.1),cos(-.1),0,
0,-50,-1000,1
);
vec3 cPosition = (aPosition)*vec3(scale,scale,-1);
gl_Position = uCameraMatrix*viewAngle*(uTransformMatrix*vec4(cPosition.xy,0.0,1.0)+vec4(0,0,cPosition.z,0));
vUv = aUv;//uv傳給片元著色器的,供取樣定位用
}
複製程式碼
//片元著色器
precision highp float;
uniform sampler2D uImage;
varying vec2 vUv;
void main(){
vec4 color = texture2D(uImage,vUv);
if(color.a == 0.0){
discard;//這個是如果取樣的顏色是透明的則丟棄該顏色,和不加有一點兒區別,看下方圖(需要關閉BLEND)
}
gl_FragColor = color;
}
複製程式碼
上述頂點著色器主要說下
gl_Position = uCameraMatrix*viewAngle*(uTransformMatrix*vec4(cPosition.xy,0.0,1.0)+vec4(0,0,cPosition.z,0));
複製程式碼
uCameraMatrix
:透視矩陣
viewAngle
:相當於lookAt,我也想直接在js中把這兩個矩陣整合了,但是看gl-mat4
的lookAt
方法用不對,也沒深究,後來放棄了,直接寫進去了,再就是我這裡面的Z軸取反了,因為gl-mat4
裡的透視矩陣給我反過來了,我用不慣。。?,然後正回來了。
uTransformMatrix
:變換矩陣,用於變換當前元素用的,心細的童鞋看了應該會問我為什麼不直接寫成
uTransformMatrix*vec4(cPosition,1.0)
而是寫成
uTransformMatrix*vec4(cPosition.xy,0.0,1.0)+vec4(0,0,cPosition.z,0)
呢?我的做法是用同一個矩陣使每個元素按照自身的底部進行旋轉,如果z軸不是0的話旋轉就不是底部了,所以要先變換,在進行Z軸位移,就是我想要的每個元素以自身的底兒來旋轉。
說完shader接下來就是drawArrays了。
整個3d中我分成了兩類元素,一類是不變的,也就是地面,一類是跟著展開旋轉的,也就是非地面的部分。
地面是相對於其他部分來說只有 uTransformMatrix
是個單位矩陣,其他的是隨時間變換而變換,所以我選擇了把他們統一做成了一樣的結構,新增了一個rotateFlag
做區分。
每個資料結構如下:
interface attribData{
buffer:WebGLBuffer;
data:Float32Array; //記錄的頂點和UV
texture?:WebGLTexture; //自身所需的素材
rotateFlag:boolean; //旋轉開關
}
複製程式碼
- 首先要寫入元素資料
createStandEle(file,[x,y,z]){
//file:圖片名稱
//this.option.assets[file]:圖片元素
const scale = Math.sqrt((600+z)/600); //這個下面會重點說下
const imgWidth = (<HTMLImageElement>this.option.assets[file]).naturalWidth*scale;
const imgHeight = (<HTMLImageElement>this.option.assets[file]).naturalHeight*scale;
const name = file.match(/card\_([^\.]+)/)[1];
const data = {
buffer:this.gl.createBuffer(),
data:new Float32Array([
//頂點資料 UV資料
x-imgWidth/2,y,z, 0,1,
x+imgWidth/2,y,z, 1,1,
x-imgWidth/2,y+imgHeight,z, 0,0,
x+imgWidth/2,y+imgHeight,z, 1,0
]),
texture:this.gl.createTexture(),
rotateFlag:true,
};
//this.cardData:是我的所有元素的集合
this.cardData[name] = data;
this.gl.bindBuffer(this.gl.ARRAY_BUFFER,data.buffer);
//給ARRAY_BUFFER寫入資料
this.gl.bufferData(this.gl.ARRAY_BUFFER, data.data, this.gl.STATIC_DRAW);
this.gl.activeTexture(this.gl.TEXTURE0);
this.gl.bindTexture(this.gl.TEXTURE_2D,data.texture);
let format = this.gl.RGB; //jpg沒必要用alpha
if(texture.search(/\.png$/)>=0){
format = this.gl.RGBA;
}
//給gl.TEXTURE_2D設定紋理
this.gl.texImage2D(this.gl.TEXTURE_2D,0,format,format,this.gl.UNSIGNED_BYTE,this.option.assets[texture]);
//下面是縮放取樣和包裝方式
this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_MIN_FILTER,this.gl.LINEAR);
this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_MAG_FILTER,this.gl.LINEAR);
this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_WRAP_S,this.gl.CLAMP_TO_EDGE);
this.gl.texParameteri(this.gl.TEXTURE_2D,this.gl.TEXTURE_WRAP_T,this.gl.CLAMP_TO_EDGE);
}
複製程式碼
基本邏輯就是建立緩衝->繫結緩衝—>給緩衝賦值
複製程式碼
程式碼中的scale
有必要說一下,透視矩陣中是符合近大遠小的特徵,但是設計稿件是平面的,沒有遠近的概念,加上遠近之後,psd的前面的元素根據近大遠小的原則是不做處理的話,近處的會大的很離譜,這時有同學會說,我直接縮小圖片就好啦,那麼問題又來了,縮小圖片後近大遠小的原則,其實是近處的元素處於放大的效果 ,小圖片放大會虛大家都知道的吧,所以採取直接縮小圖片的做法是錯的,唯一的做法是修改元素大小,來填充圖片,這樣就不會出現虛的現象了。
- 執行渲染
render(timeStamp,offsetTime){
if(this.rotateX<Math.PI/2){
this.rotateX+=0.01*offsetTime;
}else{
this.rotateX = Math.PI/2;
}
Object.keys(this.cardData).forEach(i=>{
//遍歷並渲染所有元素
this.renderBuffer(this.cardData[i]);
});
super.render(timeStamp,offsetTime);
}
renderBuffer(data:attribData){
this.gl.clear(this.gl.COLOR_BUFFER_BIT|this.gl.DEPTH_BUFFER_BIT);
this.gl.useProgram(this.cardProgram);
if(data.rotateFlag){
const rotate = this.rotateX-Math.PI/2;
this.gl.uniformMatrix4fv(this.cardParam.uTransformMatrix,false,new Float32Array([
1,0,0,0,
0,Math.cos(rotate),-Math.sin(rotate),0,
0,Math.sin(rotate),Math.cos(rotate),0,
0,0,0,1,
]));
}else{
//如果不是旋轉元素則賦值給uTransformMatrix 一個單位矩陣。
this.gl.uniformMatrix4fv(this.cardParam.uTransformMatrix ,false,this.identityMatrix);
}
this.gl.bindBuffer(this.gl.ARRAY_BUFFER,data.buffer);
this.gl.vertexAttribPointer(<GLint>this.cardParam.aPosition,3,this.gl.FLOAT,false,4*5,0);
this.gl.vertexAttribPointer(<GLint>this.cardParam.aUv,2,this.gl.FLOAT,false,4*5,4*3);
this.gl.activeTexture(this.gl.TEXTURE0);
this.gl.bindTexture(this.gl.TEXTURE_2D,data.texture);
this.gl.drawArrays(this.gl.TRIANGLE_STRIP,0,4);
}
複製程式碼
基本邏輯就 繫結緩衝&繫結紋理—>告訴顯示卡從當前繫結的緩衝區中讀取頂點資料->drawArrays
有啥不明白的留言~~~歡迎提問~哈哈哈