纯白色正方体
<html>
<head>11</head>
<body>
<canvas id = "test" width = "200" height = "200">canvas </canvas>
<script src = "webgltest/cuon-matrix.js"></script>
<script >
//頂點(diǎn)著色器
var vertexShaderSource =
??? 'attribute vec4 a_Position;\n' +
??? 'attribute vec4 a_Color;\n' +
?? ?'uniform mat4 u_mvpMatrix;\n' +
??? 'varying vec4 v_Color;\n' +???? //varying變量
??? 'void main() {\n' +
??? //'gl_Position = u_ModelViewMatrix * a_Position;\n'+? //設(shè)置坐標(biāo)
??? 'gl_Position = u_mvpMatrix * a_Position;\n'+? //設(shè)置坐標(biāo)
??? 'v_Color = a_Color;\n' + //將數(shù)據(jù)傳給片元著色器
??? '}\n';
//片元著色器
var fragmentShaderSource =
??? 'precision mediump float;\n' +
??? 'varying vec4 v_Color;\n' +???? //varying變量
??? 'void main() {\n' +
??? 'gl_FragColor = v_Color;\n'+ //設(shè)置顏色
??? '}\n';
//創(chuàng)建著色器方法，輸入?yún)?shù)：渲染上下文，著色器類(lèi)型，數(shù)據(jù)源
function createShader(gl, type, source)
{
??? //創(chuàng)建著色器對(duì)象
??? var shader = gl.createShader(type);
??? //提供數(shù)據(jù)源
??? gl.shaderSource(shader,source);
??? //編譯著色器
??? gl.compileShader(shader);
??? //鏈接
??? var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
??? if(success)
??? {
??????? return shader;
??? }
??? console.log(gl.getShaderInfoLog(shader));
??? gl.deleteShader(shader);
?? ?
}
//將頂點(diǎn)著色器和像素著色器鏈接到一個(gè)著色程序
function createProgram(gl, vertexShader, fragmentShader)
{
??? var program = gl.createProgram();
??? gl.attachShader( program, vertexShader);
??? gl.attachShader( program, fragmentShader);
??? gl.linkProgram( program );
??? var success = gl.getProgramParameter(program, gl.LINK_STATUS);
??? if(success)
??? {
??????? console.log("link right");
??????? return program;
??? }
??? console.log(gl.getProgramInfoLog(program));
??? gl.deleteProgram(program);
}
//創(chuàng)建頂點(diǎn)緩沖區(qū)和索引緩沖區(qū)
function initVertexBuffers(program,gl) {
? // Create a cube
? //??? v6----- v5
? //?? /|????? /|
? //? v1------v0|
? //? | |???? | |
? //? | |v7---|-|v4
? //? |/????? |/
? //? v2------v3
? var vertices = new Float32Array([?? // Vertex coordinates
???? 1.0, 1.0, 1.0,? -1.0, 1.0, 1.0,? -1.0,-1.0, 1.0,?? 1.0,-1.0, 1.0,? // v0-v1-v2-v3 front
???? 1.0, 1.0, 1.0,?? 1.0,-1.0, 1.0,?? 1.0,-1.0,-1.0,?? 1.0, 1.0,-1.0,? // v0-v3-v4-v5 right
???? 1.0, 1.0, 1.0,?? 1.0, 1.0,-1.0,? -1.0, 1.0,-1.0,? -1.0, 1.0, 1.0,? // v0-v5-v6-v1 up
??? -1.0, 1.0, 1.0,? -1.0, 1.0,-1.0,? -1.0,-1.0,-1.0,? -1.0,-1.0, 1.0,? // v1-v6-v7-v2 left
??? -1.0,-1.0,-1.0,?? 1.0,-1.0,-1.0,?? 1.0,-1.0, 1.0,? -1.0,-1.0, 1.0,? // v7-v4-v3-v2 down
???? 1.0,-1.0,-1.0,? -1.0,-1.0,-1.0,? -1.0, 1.0,-1.0,?? 1.0, 1.0,-1.0?? // v4-v7-v6-v5 back
? ]);
? var colors = new Float32Array([???? // Colors
??? 1.0, 1.0, 1.0,? 1.0, 1.0, 1.0,? 1.0, 1.0, 1.0,? 1.0, 1.0, 1.0,? // v0-v1-v2-v3 front(white)
??? 1.0, 1.0, 1.0,? 1.0, 1.0, 1.0,? 1.0, 1.0, 1.0,? 1.0, 1.0, 1.0,? // v0-v3-v4-v5 right(white)
??? 1.0, 1.0, 1.0,? 1.0, 1.0, 1.0,? 1.0, 1.0, 1.0,? 1.0, 1.0, 1.0,? // v0-v5-v6-v1 up(white)
??? 1.0, 1.0, 1.0,? 1.0, 1.0, 1.0,? 1.0, 1.0, 1.0,? 1.0, 1.0, 1.0,? // v1-v6-v7-v2 left(white)
??? 1.0, 1.0, 1.0,? 1.0, 1.0, 1.0,? 1.0, 1.0, 1.0,? 1.0, 1.0, 1.0,? // v7-v4-v3-v2 down(white)
??? 1.0, 1.0, 1.0,? 1.0, 1.0, 1.0,? 1.0, 1.0, 1.0,? 1.0, 1.0, 1.0?? // v4-v7-v6-v5 back(white)
? ]);
? var indices = new Uint8Array([?????? // Indices of the vertices
???? 0, 1, 2,?? 0, 2, 3,??? // front
???? 4, 5, 6,?? 4, 6, 7,??? // right
???? 8, 9,10,?? 8,10,11,??? // up
??? 12,13,14,? 12,14,15,??? // left
??? 16,17,18,? 16,18,19,??? // down
??? 20,21,22,? 20,22,23???? // back
? ]);
? // Create a buffer object
? var indexBuffer = gl.createBuffer();
? if (!indexBuffer)
??? return -1;
? // Write the vertex coordinates and color to the buffer object
? if (!initArrayBuffer(program,gl, vertices, 3, gl.FLOAT, 'a_Position'))
??? return -1;
? if (!initArrayBuffer(program,gl, colors, 3, gl.FLOAT, 'a_Color'))
??? return -1;
? // Write the indices to the buffer object
? gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
? gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
? return indices.length;
}
function initArrayBuffer(program, gl, data, num, type, attribute) {
? var buffer = gl.createBuffer();?? // Create a buffer object
? if (!buffer) {
??? console.log('Failed to create the buffer object');
??? return false;
? }
? // Write date into the buffer object
? gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
? gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
? // Assign the buffer object to the attribute variable
? var a_attribute = gl.getAttribLocation(program, attribute);
? if (a_attribute < 0) {
??? console.log('Failed to get the storage location of ' + attribute);
??? return false;
? }
? gl.vertexAttribPointer(a_attribute, num, type, false, 0, 0);
? // Enable the assignment of the buffer object to the attribute variable
? gl.enableVertexAttribArray(a_attribute);
? return true;
}
??? var canvas = document.getElementById("test");
??? //創(chuàng)建webgl渲染上下文
??? var gl = canvas.getContext("webgl");
??? //var gl = WebGLUtils.setupWebGL(canvas);
??? if(!gl)
??? {
??????? console.log("wrong");
??? }
??? else
??? {
??????? console.log("right");
??? }
??? //初始化著色器
??? var vertexShader = createShader(gl,gl.VERTEX_SHADER,vertexShaderSource);
??? var fragmentShader = createShader(gl,gl.FRAGMENT_SHADER, fragmentShaderSource);
??? var program = createProgram(gl, vertexShader, fragmentShader);
??? gl.useProgram(program);
??? //創(chuàng)建頂點(diǎn)數(shù)組
?? ?var n = initVertexBuffers(program,gl);
?
?? ?var g_near = 1.0, g_far = 100.0;
?? ?//模型視圖投影矩陣
?? ?var mvpMatrix = new Matrix4();
?? ?mvpMatrix.setPerspective(30, canvas.width / canvas.height,g_near, g_far);
?? ?mvpMatrix.lookAt(3,3,7,0,0,0,0,1,0);
?? ?//計(jì)算模型視圖投影矩陣
?? ?//獲取投影矩陣
?? ?var u_mvpMatrix = gl.getUniformLocation(program, 'u_mvpMatrix');
?? ?//將投影矩陣傳給u_ProjMatrix變量
?? ?gl.uniformMatrix4fv(u_mvpMatrix, false, mvpMatrix.elements);
??? //清除顏色
?? ?//在繪制之前，清除深度緩沖區(qū)
??? gl.clearColor(0.0,0.0,0.0,1.0);
?? ?//開(kāi)啟隱藏面消除功能
?? ?gl.enable(gl.DEPTH_TEST);
??? gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
?? ?//繪制正方體
??? gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0 );
?? ?
??? </script>
</body>
</html>
?
總結(jié)
- 上一篇： 2022-10-31如何将自己训练的yo
- 下一篇： June 17(th)