level two資料 level two錄播課資料 weGL prev wegl-1

1、WebGL入門,我是董美琪,01,基礎(chǔ)入門,流程,繪制二維圖圖形,1. 獲取繪圖上下文對(duì)象： var gl = canvas.getContext(webgl); 2. 初始化著色器（著色器分為頂點(diǎn)著色器和片元著色器） 頂點(diǎn)著色器： 用來描述頂點(diǎn)特征的程序 片元著色器： 進(jìn)行逐片元處理過程如光照的程序,著色器的變量聲明方式,1. attribute變量： 傳輸?shù)氖桥c頂點(diǎn)有關(guān)的數(shù)據(jù) 2. uniform變量： 傳輸?shù)氖菍?duì)于所有頂點(diǎn)都相關(guān)（或與頂點(diǎn)無關(guān)）的數(shù)據(jù)（全局變量） 3. textures變量： 紋理（紋理是一個(gè)數(shù)據(jù)序列，可以在著色程序運(yùn)行中隨意讀取其中的數(shù)據(jù)。 大多數(shù)情況存放的是圖像數(shù)據(jù)，

2、但是紋理僅僅是數(shù)據(jù)序列， 你也可以隨意存放除了顏色數(shù)據(jù)以外的其它數(shù)據(jù)。） 4. Varyings可變變量： 可變量是一種頂點(diǎn)著色器給片斷著色器傳值的方式，依照渲染的圖元是點(diǎn)， 線還是三角形，頂點(diǎn)著色器中設(shè)置的可變量會(huì)在片斷著色器運(yùn)行中獲取不同的插值。,變量聲明,GLSL ES數(shù)據(jù)類型,精度限定字,3.創(chuàng)建著色器方法,/ 創(chuàng)建著色器方法，輸入?yún)?shù)：渲染上下文，著色器類型，數(shù)據(jù)源 function createShader(gl, type, source) var shader = gl.createShader(type); / 創(chuàng)建著色器對(duì)象 gl.shaderSource(shader,

3、source); / 提供數(shù)據(jù)源 pileShader(shader); / 編譯 - 生成著色器 var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS); if (success) return shader; console.log(gl.getShaderInfoLog(shader); gl.deleteShader(shader); var vertexShaderSource = document.getElementById(vertex).text; var fragmentShaderSource = do

4、cument.getElementById(fragment).text; var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource); var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);,3. 創(chuàng)建程序,/ 創(chuàng)建程序 function createProgram(gl, vertexShader, fragmentShader) var program = gl.createProgram();

5、gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); var success = gl.getProgramParameter(program, gl.LINK_STATUS); if (success) return program; console.log(-, gl.getProgramInfoLog(program); gl.deleteProgram(program); var program = createProgram(gl, vertexShader, fragmentShader);,獲取緩沖區(qū)數(shù)據(jù),/ 獲取頂點(diǎn)數(shù)據(jù) var positionAttributeLocation = gl.getAttribLocation(program, a_position); / 創(chuàng)建頂點(diǎn)緩沖區(qū) var positionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); var positions = 0, 0, 0, 1, 1, 0， ; /將頂點(diǎn)數(shù)據(jù)存儲(chǔ)