WEBGL学习【九】立方体贴不同的纹理
<html>
<!--开始实现一个三维街景的渲染效果-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>NeHeWebGL----环境光（光照模型）</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <script type="text/javascript" src="Oak3D_v_0_5.js"></script> <script id="shader-fs" type="x-shader/x-fragment"> precision mediump float; varying vec2 vTextureCoord;
varying vec3 vLightWeighting; uniform sampler2D uSampler; void main(void) {
vec4 textureColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
gl_FragColor = vec4(textureColor.rgb * vLightWeighting, textureColor.a);
} </script> <script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec3 aVertexNormal;
attribute vec2 aTextureCoord; uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
uniform mat4 uNMatrix; uniform vec3 uAmbientColor; uniform vec3 uLightingDirection;
uniform vec3 uDirectionalColor; uniform bool uUseLighting; varying vec2 vTextureCoord;
varying vec3 vLightWeighting; void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
vTextureCoord = aTextureCoord; if (!uUseLighting) {
vLightWeighting = vec3(1.0, 1.0, 1.0);
} else {
vec3 transformedNormal = (uNMatrix * vec4(aVertexNormal, 1.0)).xyz;
float directionalLightWeighting = max(dot(transformedNormal, uLightingDirection), 0.0);
vLightWeighting = uAmbientColor + uDirectionalColor * directionalLightWeighting;
}
} </script> <script type="text/javascript"> var gl; //初始化WEBGL上下文
function initGL(canvas) {
try {
gl = canvas.getContext("experimental-webgl");
gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
} catch (e) {
}
if (!gl) {
alert("Could not initialise WebGL, sorry :-(");
}
} //获取着色器
function getShader(gl, id) {
var shaderScript = document.getElementById(id);
if (!shaderScript) {
return null;
} var str = "";
var k = shaderScript.firstChild;
while (k) {
if (k.nodeType == 3) {
str += k.textContent;
}
k = k.nextSibling;
} var shader;
if (shaderScript.type == "x-shader/x-fragment") {
shader = gl.createShader(gl.FRAGMENT_SHADER);
} else if (shaderScript.type == "x-shader/x-vertex") {
shader = gl.createShader(gl.VERTEX_SHADER);
} else {
return null;
} gl.shaderSource(shader, str);
gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(shader));
return null;
} return shader;
} //初始化着色器
var shaderProgram; function initShaders() {
var fragmentShader = getShader(gl, "shader-fs");
var vertexShader = getShader(gl, "shader-vs"); shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram); if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert("Could not initialise shaders");
} gl.useProgram(shaderProgram); //获取顶点着色器中的aVertexPosition变量，并开启
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute); //获取顶点着色器中的aVertexNormal法向量变量，并开启
shaderProgram.vertexNormalAttribute = gl.getAttribLocation(shaderProgram, "aVertexNormal");
gl.enableVertexAttribArray(shaderProgram.vertexNormalAttribute); //获取顶点着色器中的aTextureCoord纹理坐标的存储位置，并且开启
shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute); //获取模型居住，取样器，光照等参数信息的存储位置
shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
shaderProgram.nMatrixUniform = gl.getUniformLocation(shaderProgram, "uNMatrix");
shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
shaderProgram.useLightingUniform = gl.getUniformLocation(shaderProgram, "uUseLighting");
shaderProgram.ambientColorUniform = gl.getUniformLocation(shaderProgram, "uAmbientColor");
shaderProgram.lightingDirectionUniform = gl.getUniformLocation(shaderProgram, "uLightingDirection");
shaderProgram.directionalColorUniform = gl.getUniformLocation(shaderProgram, "uDirectionalColor");
} //处理已经加载的纹理图片
/*function handleLoadedTexture(texture) {
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
gl.generateMipmap(gl.TEXTURE_2D); gl.bindTexture(gl.TEXTURE_2D, null);
}*/ //从本地文件中加载一张纹理图片并且初始化
/* var crateTexture; function initTexture() {
crateTexture = gl.createTexture();
crateTexture.image = new Image();
crateTexture.image.onload = function () {
handleLoadedTexture(crateTexture)
} //设置我的纹理图片
crateTexture.image.src = "./resources/woodbox.bmp";
}*/ //创建我的模型视图矩阵
var mvMatrix;
var mvMatrixStack = [];
var pMatrix; //矩阵入栈
function mvPushMatrix() {
var copy = new okMat4();
mvMatrix.clone(copy);
mvMatrixStack.push(copy);
} //矩阵出栈
function mvPopMatrix() {
if (mvMatrixStack.length == 0) {
throw "Invalid popMatrix!";
}
mvMatrix = mvMatrixStack.pop();
} //该函数主要是吧我当前的模型视图投影矩阵及时更新到顶点着色器
function setMatrixUniforms() {
gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix.toArray());
gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix.toArray()); //计算模型视图矩阵的逆转置矩阵（运动物体的法向量不断在改变）
var normalMatrix = mvMatrix.inverse().transpose();
gl.uniformMatrix4fv(shaderProgram.nMatrixUniform, false, normalMatrix.toArray());
} //处理物体运动的一些基本参数
var xRot = 0;
var xSpeed = 3; var yRot = 0;
var ySpeed = -3; var z = -5.0; //可以处理多个按键同时按下的情形
var currentlyPressedKeys = {}; function handleKeyDown(event) {
currentlyPressedKeys[event.keyCode] = true;
} function handleKeyUp(event) {
currentlyPressedKeys[event.keyCode] = false;
} //根据不同的按键做出不同的反应
function handleKeys() {
if (currentlyPressedKeys[33]) {
// Page Up
z -= 0.05;
}
if (currentlyPressedKeys[34]) {
// Page Down
z += 0.05;
}
if (currentlyPressedKeys[37]) {
// Left cursor key
ySpeed -= 1;
}
if (currentlyPressedKeys[39]) {
// Right cursor key
ySpeed += 1;
}
if (currentlyPressedKeys[38]) {
// Up cursor key
xSpeed -= 1;
}
if (currentlyPressedKeys[40]) {
// Down cursor key
xSpeed += 1;
}
} //初始化我的顶点缓冲区参数（包括位置、法向量、纹理坐标、位置索引）
var cubeVertexPositionBuffer;
var cubeVertexNormalBuffer;
var cubeVertexTextureCoordBuffer;
var cubeVertexIndexBuffer; //立方体的索引
var cubeVertexTextureIndex0;
var cubeVertexTextureIndex1;
var cubeVertexTextureIndex2;
var cubeVertexTextureIndex3;
var cubeVertexTextureIndex4;
var cubeVertexTextureIndex5; //利用这个全局变量来保存所有的属性信息
var pwgl = {};
// Keep track of ongoing image loads to be able to handle lost context
pwgl.ongoingImageLoads = []; function initBuffers() {
cubeVertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
var vertices = [
// Front face
-1.0, -1.0, 1.0,
1.0, -1.0, 1.0,
1.0, 1.0, 1.0,
-1.0, 1.0, 1.0, // Back face
-1.0, -1.0, -1.0,
-1.0, 1.0, -1.0,
1.0, 1.0, -1.0,
1.0, -1.0, -1.0, // Top face
-1.0, 1.0, -1.0,
-1.0, 1.0, 1.0,
1.0, 1.0, 1.0,
1.0, 1.0, -1.0, // Bottom face
-1.0, -1.0, -1.0,
1.0, -1.0, -1.0,
1.0, -1.0, 1.0,
-1.0, -1.0, 1.0, // Right face
1.0, -1.0, -1.0,
1.0, 1.0, -1.0,
1.0, 1.0, 1.0,
1.0, -1.0, 1.0, // Left face
-1.0, -1.0, -1.0,
-1.0, -1.0, 1.0,
-1.0, 1.0, 1.0,
-1.0, 1.0, -1.0,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
cubeVertexPositionBuffer.itemSize = 3;
cubeVertexPositionBuffer.numItems = 24; //设置我的立方体各个方向的法向量
cubeVertexNormalBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexNormalBuffer);
var vertexNormals = [
// Front face
0.0, 0.0, 1.0,
0.0, 0.0, 1.0,
0.0, 0.0, 1.0,
0.0, 0.0, 1.0, // Back face
0.0, 0.0, -1.0,
0.0, 0.0, -1.0,
0.0, 0.0, -1.0,
0.0, 0.0, -1.0, // Top face
0.0, 1.0, 0.0,
0.0, 1.0, 0.0,
0.0, 1.0, 0.0,
0.0, 1.0, 0.0, // Bottom face
0.0, -1.0, 0.0,
0.0, -1.0, 0.0,
0.0, -1.0, 0.0,
0.0, -1.0, 0.0, // Right face
1.0, 0.0, 0.0,
1.0, 0.0, 0.0,
1.0, 0.0, 0.0,
1.0, 0.0, 0.0, // Left face
-1.0, 0.0, 0.0,
-1.0, 0.0, 0.0,
-1.0, 0.0, 0.0,
-1.0, 0.0, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexNormals), gl.STATIC_DRAW);
cubeVertexNormalBuffer.itemSize = 3;
cubeVertexNormalBuffer.numItems = 24; //纹理坐标的创建
cubeVertexTextureCoordBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);
var textureCoords = [
// Front face
0.0, 0.0,
1.0, 0.0,
1.0, 1.0,
0.0, 1.0, // Back face
1.0, 0.0,
1.0, 1.0,
0.0, 1.0,
0.0, 0.0, // Top face
0.0, 1.0,
0.0, 0.0,
1.0, 0.0,
1.0, 1.0, // Bottom face
1.0, 1.0,
0.0, 1.0,
0.0, 0.0,
1.0, 0.0, // Right face
1.0, 0.0,
1.0, 1.0,
0.0, 1.0,
0.0, 0.0, // Left face
0.0, 0.0,
1.0, 0.0,
1.0, 1.0,
0.0, 1.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
cubeVertexTextureCoordBuffer.itemSize = 2;
cubeVertexTextureCoordBuffer.numItems = 24; //顶点索引坐标的初始化
/*cubeVertexIndexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
var cubeVertexIndices = [
0, 1, 2, 0, 2, 3, // Front face
4, 5, 6, 4, 6, 7, // Back face
8, 9, 10, 8, 10, 11, // Top face
12, 13, 14, 12, 14, 15, // Bottom face
16, 17, 18, 16, 18, 19, // Right face
20, 21, 22, 20, 22, 23 // Left face
];
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(cubeVertexIndices), gl.STATIC_DRAW);
cubeVertexIndexBuffer.itemSize = 1;
cubeVertexIndexBuffer.numItems = 36;*/ //对立方体的六个面建立索引，为后面的渲染做准备
//对立方体的每一个面分别建立缓冲区，以实现对不同的面实现不同的纹理
//前面
cubeVertexTextureIndex0 = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexTextureIndex0);
var Indices0 = [0, 1, 2, 0, 2, 3];
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(Indices0), gl.STATIC_DRAW);
cubeVertexTextureIndex0.itemSize = 1;
cubeVertexTextureIndex0.numItems = 6; //后面
cubeVertexTextureIndex1 = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexTextureIndex1);
var Indices1 = [4, 5, 6, 4, 6, 7];
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(Indices1), gl.STATIC_DRAW);
cubeVertexTextureIndex1.itemSize = 1;
cubeVertexTextureIndex1.numItems = 6; //上面
cubeVertexTextureIndex2 = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexTextureIndex2);
var Indices2 = [8, 9, 10, 8, 10, 11];
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(Indices2), gl.STATIC_DRAW);
cubeVertexTextureIndex2.itemSize = 1;
cubeVertexTextureIndex2.numItems = 6; //下面
cubeVertexTextureIndex3 = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexTextureIndex3);
var Indices3 = [12, 13, 14, 12, 14, 15];
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(Indices3), gl.STATIC_DRAW);
cubeVertexTextureIndex3.itemSize = 1;
cubeVertexTextureIndex3.numItems = 6; //右边
cubeVertexTextureIndex4 = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexTextureIndex4);
var Indices4 = [16, 17, 18, 16, 18, 19];
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(Indices4), gl.STATIC_DRAW);
cubeVertexTextureIndex4.itemSize = 1;
cubeVertexTextureIndex4.numItems = 6; //左边
cubeVertexTextureIndex5 = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexTextureIndex5);
var Indices5 = [20, 21, 22, 20, 22, 23];
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(Indices5), gl.STATIC_DRAW);
cubeVertexTextureIndex5.itemSize = 1;
cubeVertexTextureIndex5.numItems = 6; } //纹理加载完成之后的处理
function textureFinishedLoading(image, texture) {
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); //把纹理对象载入到顶点着色器
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE,
image);
//Mip映射纹理（会自动生成Mip映射纹理链）---会提高纹理的分辨率
gl.generateMipmap(gl.TEXTURE_2D); //设置我的纹理滤波方式
//拉伸纹理
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
//纹理收缩
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); //对于所有的纹理坐标的S,T方向应用镜面映射
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.MIRRORED_REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT);
gl.bindTexture(gl.TEXTURE_2D, null);
} //开始从本地加载图片作为纹理图片
function loadImageForTexture(url, texture) {
//创建一个类似javascript的DOM对象的图片对象【< img src="" id=""/>】
var image = new Image();
//图片在如完成之后
image.onload = function() {
//删除当前数组中的这张图片
pwgl.ongoingImageLoads.splice(pwgl.ongoingImageLoads.indexOf(image), 1);
textureFinishedLoading(image, texture);
}
pwgl.ongoingImageLoads.push(image);
image.crossOrigin = "anonymous";
image.src = url;
} //在这里我设置了三张纹理图片
function setupTextures() {
// Texture for the table
pwgl.woodTexture = gl.createTexture();
loadImageForTexture("./resources/wood_128x128.jpg", pwgl.woodTexture); // Texture for the floor
pwgl.groundTexture = gl.createTexture();
loadImageForTexture("./resources/wood_floor_256.jpg", pwgl.groundTexture); // Texture for the box on the table
pwgl.boxTexture = gl.createTexture();
loadImageForTexture("./resources/xiuxiuba.bmp", pwgl.boxTexture);
//这里会出现错误的跨域请求
//has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource
//loadImageForTexture("127.0.0.1:8080/webgl/images/xiuxiu.bmp", pwgl.boxTexture);
pwgl.mofangTexture = gl.createTexture();
loadImageForTexture("./resources/xiuxiu.bmp", pwgl.mofangTexture); //再次循环创建六个立方体纹理图片
pwgl.cube1 = gl.createTexture();
pwgl.cube2 = gl.createTexture();
pwgl.cube3 = gl.createTexture();
pwgl.cube4 = gl.createTexture();
pwgl.cube5 = gl.createTexture();
pwgl.cube6 = gl.createTexture();
loadImageForTexture("./resources/cube/01.bmp", pwgl.cube1);
loadImageForTexture("./resources/cube/02.bmp", pwgl.cube2);
loadImageForTexture("./resources/cube/03.bmp", pwgl.cube3);
loadImageForTexture("./resources/cube/04.bmp", pwgl.cube4);
loadImageForTexture("./resources/cube/05.bmp", pwgl.cube5);
loadImageForTexture("./resources/cube/06.bmp", pwgl.cube6); } //绘制场景
function drawScene() {
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); //设置我的投影矩阵
pMatrix = okMat4Proj(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0); //模型视图矩阵
mvMatrix = okMat4Trans(0.0, 0.0, z); mvMatrix.rotX(OAK.SPACE_LOCAL, xRot, true);
mvMatrix.rotY(OAK.SPACE_LOCAL, yRot, true); //开始向顶点着色器中的相应参数传值
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, cubeVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexNormalBuffer);
gl.vertexAttribPointer(shaderProgram.vertexNormalAttribute, cubeVertexNormalBuffer.itemSize, gl.FLOAT, false, 0, 0); gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);
gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, cubeVertexTextureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms(); /* gl.activeTexture(gl.TEXTURE0);
//绑定纹理坐标到目标对象
gl.bindTexture(gl.TEXTURE_2D, crateTexture);
gl.uniform1i(shaderProgram.samplerUniform, 0);
var lighting = document.getElementById("lighting").checked;
//console.log(lighting);
//这里就只是把光照是否勾选的状态传给顶点着色器
gl.uniform1i(shaderProgram.useLightingUniform, lighting);*/ var lighting = document.getElementById("lighting").checked;
//console.log(lighting);
//这里就只是把光照是否勾选的状态传给顶点着色器
gl.uniform1i(shaderProgram.useLightingUniform, lighting); //在这里重复执行六次赋值纹理的操作
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, pwgl.cube1);
gl.uniform1i(shaderProgram.samplerUniform, 0);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexTextureIndex0);
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, pwgl.cube2);
gl.uniform1i(shaderProgram.samplerUniform, 0);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexTextureIndex1);
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, pwgl.cube3);
gl.uniform1i(shaderProgram.samplerUniform, 0);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexTextureIndex2); //
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, pwgl.cube4);
gl.uniform1i(shaderProgram.samplerUniform, 0);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexTextureIndex3);
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, pwgl.cube5);
gl.uniform1i(shaderProgram.samplerUniform, 0);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexTextureIndex4);
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, pwgl.cube6);
gl.uniform1i(shaderProgram.samplerUniform, 0);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexTextureIndex5);
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); setMatrixUniforms(); //判断光照选项框是否被选中
if (lighting) {
//读出用户在输入框中键入的环境光的红、绿、蓝的颜色值，并传递给着色器
gl.uniform3f(
shaderProgram.ambientColorUniform,
parseFloat(document.getElementById("ambientR").value),
parseFloat(document.getElementById("ambientG").value),
parseFloat(document.getElementById("ambientB").value)
); //传递光线方向给着色器
var lightingDirection = new okVec3(
parseFloat(document.getElementById("lightDirectionX").value),
parseFloat(document.getElementById("lightDirectionY").value),
parseFloat(document.getElementById("lightDirectionZ").value)
); //光线方向的归一化（实时胴体地在物体运动的每一个时刻，把环境光的相应参数传给顶点着色器）
var adjustedLD = lightingDirection.normalize(false);
//将光线方向向量乘以一个标量-1，用于调转向量的方向
adjustedLD = okVec3MulVal(adjustedLD, -1.0);
gl.uniform3fv(shaderProgram.lightingDirectionUniform, adjustedLD.toArray()); gl.uniform3f(
shaderProgram.directionalColorUniform,
parseFloat(document.getElementById("directionalR").value),
parseFloat(document.getElementById("directionalG").value),
parseFloat(document.getElementById("directionalB").value)
);
} //开始把顶点位置 传给顶点着色器（通过索引方式绘图）
/*gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
setMatrixUniforms();
//gl.drawElements(gl.TRIANGLES, cubeVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);*/
} var lastTime = 0; //实时更新旋转角度
function animate() {
var timeNow = new Date().getTime();
if (lastTime != 0) {
var elapsed = timeNow - lastTime; xRot += (xSpeed * elapsed) / 1000.0;
yRot += (ySpeed * elapsed) / 1000.0;
}
lastTime = timeNow;
} //不断重绘场景
function tick() {
okRequestAnimationFrame(tick);
handleKeys();
drawScene();
animate();
} //主函数
function webGLStart() {
var canvas = document.getElementById("lesson07-canvas");
initGL(canvas);
initShaders();
initBuffers();
//initTexture(); //设置纹理
setupTextures();
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.enable(gl.DEPTH_TEST); document.onkeydown = handleKeyDown;
document.onkeyup = handleKeyUp; tick();
} </script> </head> <body onload="webGLStart();">
<br>
<canvas id="lesson07-canvas" style="border: none;" width="500" height="500"></canvas> <br/>
<input type="checkbox" id="lighting" checked/> 开启光照<br/>
（使用<code>Page Up</code>和<code>Page Down</code>键来进行缩放） <br/>
<h2>平行光：</h2> <table style="border: 0; padding: 10px;">
<tr>
<td><b>方向：</b>
<td>X: <input type="text" id="lightDirectionX" value="-0.25"/>
<td>Y: <input type="text" id="lightDirectionY" value="-0.25"/>
<td>Z: <input type="text" id="lightDirectionZ" value="-1.0"/>
</tr>
<tr>
<td><b>颜色：</b>
<td>R: <input type="text" id="directionalR" value="0.8"/>
<td>G: <input type="text" id="directionalG" value="0.8"/>
<td>B: <input type="text" id="directionalB" value="0.8"/>
</tr>
</table> <h2>环境光：</h2>
<table style="border: 0; padding: 10px;">
<tr>
<td><b>颜色：</b>
<td>R: <input type="text" id="ambientR" value="0.2"/>
<td>G: <input type="text" id="ambientG" value="0.2"/>
<td>B: <input type="text" id="ambientB" value="0.2"/>
</tr>
</table> </body> <!--
注释：简单记录一下吧，经过前期的百般尝试；终于实现了在立方体的六个面贴上不同的纹理图片的功能；
但是使用的额仍然是2D纹理贴图方式，虽然功能实现了， 但是代码中仍然有待进一步改善哈@@@webmaster@xiuxiu.space 2017 11/9/
--> </html>
WEBGL学习【九】立方体贴不同的纹理的更多相关文章
- WebGL学习笔记（六）：纹理贴图
只可以绘制纯色的模型是不够的,为了呈现出更真实的模型,我们还需要通过纹理贴图给模型进行上色. 丢失上下文 GPU作为一种公用资源,是会被多个进程同时使用的,在资源不足的情况下(比如PC或手机系统进入休 ...
- (转)OpenGL学习——立方体贴图
转自:https://learnopengl-cn.readthedocs.io/zh/latest/04%20Advanced%20OpenGL/06%20Cubemaps/ 我们之前一直使用的是2 ...
- Unity Shaders and Effects Cookbook (4-1)(4-2)静态立方体贴图的创建与使用
開始学习第4章 - 着色器的反射 看完了1.2节,来记录一下.反射主要是利用了 Cubemap 立方体贴图. 认识Cubemap 立方体贴图.就如同名字所说.在一个立方体上有6张图.就这样觉得吧. 假 ...
- OpenGL 核心技术之立方体贴图
笔者介绍:姜雪伟,IT公司技术合伙人,IT高级讲师,CSDN社区专家.特邀编辑,畅销书作者,国家专利发明人;已出版书籍:<手把手教你架构3D游戏引擎>电子工业出版社和<Unity3D ...
- WebGL 利用FBO完成立方体贴图。
这篇主要记录WebGL的一些基本要点,顺便也学习下如何使用FBO与环境贴图.先看下效果图(需要支持WebGL,Chrome,火狐,IE11). 主要实现过程如下,先用FBO输出当前环境在立方体纹理中, ...
- WebGL学习之纹理盒
原文地址:WebGL学习之纹理盒 我们之前已经学习过二维纹理 gl.TEXTURE_2D,而且还使用它实现了各种效果.但还有一种立方体纹理 gl.TEXTURE_CUBE_MAP,它包含了6个纹理代表 ...
- Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十八章：立方体贴图
原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十八章:立方体贴图 代码工程地址: https://github.c ...
- WebGL学习之纹理贴图
为了使图形能获得接近于真实物体的材质效果,一般会使用贴图,贴图类型主要包括两种:漫反射贴图和镜面高光贴图.其中漫反射贴图可以同时实现漫反射光和环境光的效果. 实际效果请看demo:纹理贴图 2D纹理 ...
- webgl学习笔记五-纹理
写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放 术语 : 纹理 :图像 图形装配区域 :顶点着色器顶点坐标 ...
随机推荐
- confluence中设置应用程序链接到jira
有时需要在confluence中选中文本直接生成issue或story到jira里. 在"一般配置“->“应用程序链接”中创建即可.
- codeforces 257B
#include<stdio.h> #define mod 1000000007 int main() { __int64 n,m,i,j,k,x,y,z; while(scanf(&qu ...
- HDU 4513 manacher
Manacher算法,相当于求回文串. 关于Manacher,转 http://blog.sina.com.cn/s/blog_70811e1a01014esn.html 现在进入正题:首先,在字符串 ...
- 根据图片url地址获取图片的宽高
/** * 根据img获取图片的宽高 * @param img 图片地址 * @return 图片的对象,对象中图片的真实宽高 */ public BufferedImage getBufferedI ...
- KVO---视图间数据的传递：标签显示输入的内容【多个视图中】
RootViewController.m #import "ModalViewController.h" @interface RootViewController () @end ...
- Running the app on your device
So far, you've run the app on the Simulator. That's nice and all but probably notwhy you're learning ...
- luogu3799 妖梦拼木棒
题目大意 有n根木棒,现在从中选4根,想要组成一个正三角形,问有几种选法?木棒长度都<=5000. 题解 根据容斥原理,三角形两条边分别由长度相等的单根木棒组成,另一条边由两条小于该边长的木棒构 ...
- luogu1967 货车运输 最大瓶颈生成树
题目大意 给出一张图,给出q对点,求这两个点间权值最小边最大的路径,输出这个最小边权. 题解 我们先一条一条边建图.当建立的边使得图中形成环时,因为环中的每个节点只考虑是否连通和瓶颈大小,要想互相连通 ...
- B1260 [CQOI2007]涂色paint 区间dp
这个题和我一开始想的区别不是很大,但是要我独自做出来还是有一些难度. 每一次涂色 只有这两种可能: 1) 把一段未被 覆盖过的区间 涂成 * 色 2) 把一段被一种颜色覆盖的区间涂成 * 色 (并且 ...
- MyBatis的关联映射和动态SQL
CREATE TABLE tb_card ( id INT PRIMARY KEY AUTO_INCREMENT, CODE ) ); '); CREATE TABLE tb_person ( id ...