I. 서론
그리고 마지막으로 다섯 번째 장을, 겉으로는 복잡하기 시작했다.
둘째, 텍스트
예 1 : (좌표 포인트 크기를 포함), 정점 데이터에 할당 된 복수의 버퍼를 사용하여
function initVertexBuffers(gl) {
var verticesSizes = new Float32Array([
0.0, 0.5, 10.0,
-0.5, -0.5, 20.0,
0.5, -0.5, 30.0
]);
var n = 3;
var vertexSizeBuffer = gl.createBuffer();
if (!vertexSizeBuffer) {
console.log('Failed to create the buffer object');
return -1;
}
gl.bindBuffer(gl.ARRAY_BUFFER, vertexSizeBuffer);
gl.bufferData(gl.ARRAY_BUFFER, verticesSizes, gl.STATIC_DRAW);
var FSIZE = verticesSizes.BYTES_PER_ELEMENT;
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
if (a_Position < 0) {
console.log('Failed to get the storage location of a_Position');
return -1;
}
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 3, 0);
gl.enableVertexAttribArray(a_Position);
var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize');
if(a_PointSize < 0) {
console.log('Failed to get the storage location of a_PointSize');
return -1;
}
gl.vertexAttribPointer(a_PointSize, 1, gl.FLOAT, false, FSIZE * 3, FSIZE * 2);
gl.enableVertexAttribArray(a_PointSize);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
return n;
}
예 2 : 프래그먼트 쉐이더에서 색 정보를 전송하기 위해 버텍스 셰이더를 사용하여 변수를 변화
var VSHADER_SOURCE =
'attribute vec4 a_Position;\n'
'attribute vec4 a_Color;\n' //attribute变量
'varying vec4 v_Color;\n' // varying变量
'void main() {\n'
' gl_Position = a_Position;\n'
' gl_PointSize = 10.0;\n'
' v_Color = a_Color;\n' // 将attribute变量赋给varying变量
'}\n';
var FSHADER_SOURCE =
'#ifdef GL_ES\n'
'precision mediump float;\n'
'#endif GL_ES\n'
'varying vec4 v_Color;\n' //同名varying变量
'void main() {\n'
' gl_FragColor = v_Color;\n' //!!!!!
'}\n';
function initVertexBuffers(gl) {
var verticesColors = new Float32Array([
// 顶点坐标 与 颜色
0.0, 0.5, 1.0, 0.0, 0.0,
-0.5, -0.5, 0.0, 1.0, 0.0,
0.5, -0.5, 0.0, 0.0, 1.0,
]);
var n = 3;
var vertexColorBuffer = gl.createBuffer();
if (!vertexColorBuffer) {
console.log('Failed to create the buffer object');
return false;
}
gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);
var FSIZE = verticesColors.BYTES_PER_ELEMENT;
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
if (a_Position < 0) {
console.log('Failed to get the storage location of a_Position');
return -1;
}
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 5, 0);
gl.enableVertexAttribArray(a_Position);
var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
if(a_Color < 0) {
console.log('Failed to get the storage location of a_Color');
return -1;
}
gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 5, FSIZE * 2);
gl.enableVertexAttribArray(a_Color);
return n;
}
예 3 : 질감합니다 ( 사진 텍스처가 WebGL 객체를 할당)
var VSHADER_SOURCE =
'attribute vec4 a_Position;\n'
'attribute vec2 a_TexCoord;\n' // 声明一个attribute变量
'varying vec2 v_TexCoord;\n' // 声明一个varying变量
'void main() {\n'
' gl_Position = a_Position;\n'
' v_TexCoord = a_TexCoord;\n' // attribute变量赋给varying变量
'}\n';
var FSHADER_SOURCE =
'#ifdef GL_ES\n'
'precision mediump float;\n'
'#endif\n'
'uniform sampler2D u_Sampler;\n'
'varying vec2 v_TexCoord;\n'
'void main() {\n'
// texture2D(sampler2D sampler, vec2 coord)
// (纹理单元编号,纹理坐标) 这里是赋值的关键
' gl_FragColor = texture2D(u_Sampler, v_TexCoord);\n'
'}\n';
function main() {
var canvas = document.getElementById('webgl');
var gl = getWebGLContext(canvas);
if (!gl) {
console.log('Failed to get the rendering context for WebGL');
return;
}
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log('Failed to intialize shaders.');
return;
}
// 设置顶点缓存
var n = initVertexBuffers(gl);
if (n < 0) {
console.log('Failed to set the vertex information');
return;
}
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// 设置纹理
if (!initTextures(gl, n)) {
console.log('Failed to intialize the texture.');
return;
}
}
function initVertexBuffers(gl) {
var verticesTexCoords = new Float32Array([
//webgl顶点坐标, 纹理坐标相应点
-0.5, 0.5, 0.0, 1.0,
-0.5, -0.5, 0.0, 0.0,
0.5, 0.5, 1.0, 1.0,
0.5, -0.5, 1.0, 0.0,
]);
var n = 4;
// 创建缓存区对象
var vertexTexCoordBuffer = gl.createBuffer();
if (!vertexTexCoordBuffer) {
console.log('Failed to create the buffer object');
return -1;
}
gl.bindBuffer(gl.ARRAY_BUFFER, vertexTexCoordBuffer);
gl.bufferData(gl.ARRAY_BUFFER, verticesTexCoords, gl.STATIC_DRAW);
var FSIZE = verticesTexCoords.BYTES_PER_ELEMENT;
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
if (a_Position < 0) {
console.log('Failed to get the storage location of a_Position');
return -1;
}
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 4, 0);
gl.enableVertexAttribArray(a_Position);
// 将纹理坐标分配给该存储位置并开启
var a_TexCoord = gl.getAttribLocation(gl.program, 'a_TexCoord');
if (a_TexCoord < 0) {
console.log('Failed to get the storage location of a_TexCoord');
return -1;
}
gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false, FSIZE * 4, FSIZE * 2);
gl.enableVertexAttribArray(a_TexCoord);
return n;
}
function initTextures(gl, n) {
// Step1:设置纹理对象
var texture = gl.createTexture();
if (!texture) {
console.log('Failed to create the texture object');
return false;
}
// Step2: 获取u_Sampler(取样器)存储位置
var u_Sampler = gl.getUniformLocation(gl.program, 'u_Sampler');
if (!u_Sampler) {console.log('Failed to get the storage location of u_Sampler');
return false;
}
// Step3: 创建图片对象
var image = new Image();
if (!image) {console.log('Failed to create the image object');
return false;
}
image.onload = function(){ loadTexture(gl, n, texture, u_Sampler, image); };
image.src = '../resources/sky.jpg';
return true;
}
function loadTexture(gl, n, texture, u_Sampler, image) {
// Step1:对图像进行y轴反转
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
// Step2: 开启0号纹理单元(textunit0~7)
gl.activeTexture(gl.TEXTURE0);
// Step3: 绑定纹理对象(target,texture)
// target可以是:gl.TEXTURE或gl.TEXTURE_CUBE_MAP
gl.bindTexture(gl.TEXTURE_2D, texture);
// Step4: 设置纹理参数(target,pname,param)
// gl.TEXTURE_MAG_FILTER (纹理放大) 默认值: gl.LINEAR
// gl.TEXTURE_MIN_FILTER (纹理缩小) 默认值: gl.NEAREST_MIPMAP_LINEAR
// gl.TEXTURE_WRAP_S (纹理水平填充) 默认值: gl.REPEAT(平铺式)
// gl.MIRRORED_REPEAT (镜像对称)
// gl.CLAMP_TO_EDGE (使用纹理图像边缘值)
// gl.TEXTURE_WRAP_T (纹理垂直填充) 默认值: gl.REPEAT
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
// Step5:配置纹理图片(target,level,internalformat,format,type,image)
// level: 0
// internalformat:图像的内部格式
// format: 纹理数据的格式,必须与internalformat一致
// type: 纹理数据的类型
// image:包含纹理的图像的image对象
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);
// Step6:将0号纹理传递至取样器
gl.uniform1i(u_Sampler, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, n);
}
의 셋째, 말
위의 코드에서 있습니다 "WebGL을 프로그래밍 가이드."
보다 전문적인 프런트 엔드 지식의 확인 [2048] 원숭이 www.mk2048.com을