webgl不同图像不同纹理_在WebGl中创建键盘敏感的3D扭曲图像

2024-01-07 19:40
文章标签 图像 创建 3d 键盘 不同 webgl 敏感 纹理 扭曲

本文主要是介绍webgl不同图像不同纹理_在WebGl中创建键盘敏感的3D扭曲图像，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

webgl不同图像不同纹理

Creating a Keyboard Sensitive 3D Twisted Images in WebGl
Creating a Keyboard Sensitive 3D Twisted Images in WebGl

Keyboard Sensitive 3D Twisted Images with WebGL. Today we continue HTML5 canvas examples. And today is our second tutorial for WebGL. We will creating animated twisting images. Also we will add handlers to manipulate with mouse and keyboard.

使用WebGL的键盘敏感3D扭曲图像。 今天，我们继续HTML5 canvas示例。 今天是我们的第二本WebGL教程。 我们将创建动画扭曲图像。 另外，我们将添加处理程序以使用鼠标和键盘进行操作。

Here are our demo and downloadable package:

这是我们的演示和可下载的软件包：

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Ok, download the example files and lets start coding !

好的，下载示例文件并开始编码！

步骤1. HTML (Step 1. HTML)

Here are html sources of our demo. As you can see – just empty page.

这是我们的演示的html来源。 如您所见–只是空白页。

index.html (index.html)

<!DOCTYPE html>
<html lang="en" >
<head><link href="css/main.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="js/glMatrix-0.9.5.min.js"></script><script type="text/javascript" src="js/webgl-utils.js"></script><script type="text/javascript" src="js/script.js"></script><title>Creating a Keyboard Sensitive 3D Twisted Images in WebGl | Script Tutorials</title>
</head>
<body onload="initWebGl();"><div class="example"><h3><a href="https://www.script-tutorials.com/twisting-images-webgl/">Creating a Keyboard Sensitive 3D Twisted Images in WebGl | Script Tutorials</a></h3><h3>You can use your mouse + arrow keys + page up / down</h3><canvas id="panel" width="500" height="333"></canvas><div style="clear:both;"></div></div>
</body>
</html>


<!DOCTYPE html>
<html lang="en" >
<head><link href="css/main.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="js/glMatrix-0.9.5.min.js"></script><script type="text/javascript" src="js/webgl-utils.js"></script><script type="text/javascript" src="js/script.js"></script><title>Creating a Keyboard Sensitive 3D Twisted Images in WebGl | Script Tutorials</title>
</head>
<body onload="initWebGl();"><div class="example"><h3><a href="https://www.script-tutorials.com/twisting-images-webgl/">Creating a Keyboard Sensitive 3D Twisted Images in WebGl | Script Tutorials</a></h3><h3>You can use your mouse + arrow keys + page up / down</h3><canvas id="panel" width="500" height="333"></canvas><div style="clear:both;"></div></div>
</body>
</html>

步骤2. CSS (Step 2. CSS)

Here are used CSS styles.

这是使用CSS样式。

css / main.css (css/main.css)

body {background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0
}
.example {background:#fff;width:500px;font-size:80%;border:1px #000 solid;margin:20px auto;padding:15px;position:relative;-moz-border-radius: 3px;-webkit-border-radius:3px
}
h3 {text-align:center;
}


body {background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0
}
.example {background:#fff;width:500px;font-size:80%;border:1px #000 solid;margin:20px auto;padding:15px;position:relative;-moz-border-radius: 3px;-webkit-border-radius:3px
}
h3 {text-align:center;
}

步骤3. JS (Step 3. JS)

js / webgl-utils.js和js / glMatrix-0.9.5.min.js (js/webgl-utils.js and js/glMatrix-0.9.5.min.js)

These files we will use in project for working with WebGL. Both files will in our package.

我们将在项目中使用这些文件来使用WebGL。 这两个文件都将放在我们的程序包中。

js / script.js (js/script.js)

var gl; // global WebGL object
var shaderProgram;
var pics_names=['1.png', '2.png', '3.png', '4.png', '5.png', '6.png', '7.png'];
var pics_num=pics_names.length;
// diffirent initializations
function initGL(canvas) {try {gl = canvas.getContext('experimental-webgl');gl.viewportWidth = canvas.width;gl.viewportHeight = canvas.height;} catch (e) {}if (! gl) {alert('Can`t initialise WebGL, not supported');}
}
function getShader(gl, type) {var str = '';var shader;if (type == 'x-fragment') {str = "#ifdef GL_ES\n"+
"precision highp float;\n"+
"#endif\n"+
"varying vec2 vTextureCoord;\n"+
"uniform sampler2D uSampler;\n"+
"void main(void) {\n"+
"    gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));\n"+
"}\n";shader = gl.createShader(gl.FRAGMENT_SHADER);} else if (type == 'x-vertex') {str = "attribute vec3 aVertexPosition;\n"+
"attribute vec2 aTextureCoord;\n"+
"uniform mat4 uMVMatrix;\n"+
"uniform mat4 uPMatrix;\n"+
"varying vec2 vTextureCoord;\n"+
"void main(void) {\n"+
"    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);\n"+
"    vTextureCoord = aTextureCoord;\n"+
"}\n";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;
}
function initShaders() {var fragmentShader = getShader(gl, 'x-fragment');var vertexShader = getShader(gl, 'x-vertex');shaderProgram = gl.createProgram();gl.attachShader(shaderProgram, vertexShader);gl.attachShader(shaderProgram, fragmentShader);gl.linkProgram(shaderProgram);if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {alert('Can`t initialise shaders');}gl.useProgram(shaderProgram);shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, 'aVertexPosition');gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, 'aTextureCoord');gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, 'uPMatrix');shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, 'uMVMatrix');shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, 'uSampler');
}
var objVertexPositionBuffer=new Array();
var objVertexTextureCoordBuffer=new Array();
var objVertexIndexBuffer=new Array();
function initObjBuffers() {for (var i=0;i<pics_num;i=i+1) {objVertexPositionBuffer[i] = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, objVertexPositionBuffer[i]);vertices = [Math.cos(i*((2*Math.PI)/pics_num)), -0.5,  Math.sin(i*((2*Math.PI)/pics_num)),Math.cos(i*((2*Math.PI)/pics_num)), 0.5,  Math.sin(i*((2*Math.PI)/pics_num)),Math.cos((i+1)*((2*Math.PI)/pics_num)), 0.5, Math.sin((i+1)*((2*Math.PI)/pics_num)),Math.cos((i+1)*((2*Math.PI)/pics_num)), -0.5,  Math.sin((i+1)*((2*Math.PI)/pics_num)),];gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);objVertexPositionBuffer[i].itemSize = 3;objVertexPositionBuffer[i].numItems = 4;objVertexTextureCoordBuffer[i] = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER,  objVertexTextureCoordBuffer[i] );var textureCoords = [0.0, 0.0,0.0, 1.0,1.0, 1.0,1.0, 0.0,];gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);objVertexTextureCoordBuffer[i].itemSize = 2;objVertexTextureCoordBuffer[i].numItems = 4;objVertexIndexBuffer[i] = gl.createBuffer();gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, objVertexIndexBuffer[i]);var objVertexIndices = [0, 1, 2,0, 2, 3,];gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(objVertexIndices), gl.STATIC_DRAW);objVertexIndexBuffer[i].itemSize = 1;objVertexIndexBuffer[i].numItems = 6;}
}
function handleLoadedTexture(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, texture.image);gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);gl.bindTexture(gl.TEXTURE_2D, null);
}
var crateTextures = Array();
function initTexture(image) {var crateImage = new Image();var texture = gl.createTexture();texture.image = crateImage;crateImage.src = image;crateImage.onload = function () {handleLoadedTexture(texture)}return texture;
}
function initTextures() {for (var i=0; i < pics_num; i++) {crateTextures[i]=initTexture(pics_names[i]);}
}
var mvMatrix = mat4.create();
var mvMatrixStack = [];
var pMatrix = mat4.create();
function setMatrixUniforms() {gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
}
function degToRad(degrees) {return degrees * Math.PI / 180;
}
// mouse and keyboard handlers
var xRot = 0;
var xSpeed = 0;
var yRot = 0;
var ySpeed = 10;
var z = -3.0;
var currentlyPressedKeys = {};
function handleKeyDown(event) {currentlyPressedKeys[event.keyCode] = true;
}
function handleKeyUp(event) {currentlyPressedKeys[event.keyCode] = false;
}
function handleKeys() {if (currentlyPressedKeys[33]) { // Page Upz -= 0.05;}if (currentlyPressedKeys[34]) { // Page Downz += 0.05;}if (currentlyPressedKeys[37]) { // Left cursor keyySpeed -= 1;}if (currentlyPressedKeys[39]) { // Right cursor keyySpeed += 1;}if (currentlyPressedKeys[38]) { // Up cursor keyxSpeed -= 1;}if (currentlyPressedKeys[40]) { // Down cursor keyxSpeed += 1;}
}
var mouseDown = false;
var lastMouseX = null;
var lastMouseY = null;
var RotationMatrix = mat4.create();
mat4.identity(RotationMatrix);
function handleMouseDown(event) {mouseDown = true;lastMouseX = event.clientX;lastMouseY = event.clientY;
}
function handleMouseUp(event) {mouseDown = false;
}
function handleMouseMove(event) {if (!mouseDown) {return;}var newX = event.clientX;var newY = event.clientY;var deltaX = newX - lastMouseX;var newRotationMatrix = mat4.create();mat4.identity(newRotationMatrix);mat4.rotate(newRotationMatrix, degToRad(deltaX / 5), [0, 1, 0]);var deltaY = newY - lastMouseY;mat4.rotate(newRotationMatrix, degToRad(deltaY / 5), [1, 0, 0]);mat4.multiply(newRotationMatrix, RotationMatrix, RotationMatrix);lastMouseX = newXlastMouseY = newY;
}
// Draw scene and initialization
var MoveMatrix = mat4.create();
mat4.identity(MoveMatrix);
function drawScene() {gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);mat4.identity(mvMatrix);mat4.translate(mvMatrix, [0.0, 0.0, z]);mat4.rotate(mvMatrix, degToRad(xRot), [1, 0, 0]);mat4.rotate(mvMatrix, degToRad(yRot), [0, 1, 0]);mat4.multiply(mvMatrix, MoveMatrix);mat4.multiply(mvMatrix, RotationMatrix);for (var i=0;i<pics_num;i=i+1) {gl.bindBuffer(gl.ARRAY_BUFFER, objVertexPositionBuffer[i]);gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, objVertexPositionBuffer[i].itemSize, gl.FLOAT, false, 0, 0);gl.bindBuffer(gl.ARRAY_BUFFER, objVertexTextureCoordBuffer[i]);gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, objVertexTextureCoordBuffer[i].itemSize, gl.FLOAT, false, 0, 0);gl.activeTexture(gl.TEXTURE0);gl.bindTexture(gl.TEXTURE_2D, crateTextures[i]);gl.uniform1i(shaderProgram.samplerUniform, 0);gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, objVertexIndexBuffer[i]);setMatrixUniforms();gl.drawElements(gl.TRIANGLES, objVertexIndexBuffer[i].numItems, 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 drawFrame() {requestAnimFrame(drawFrame);handleKeys();drawScene();animate();
}
function initWebGl() {var canvas = document.getElementById('panel');initGL(canvas);initShaders();initObjBuffers();initTextures();gl.clearColor(1.0, 1.0, 1.0, 1.0);gl.enable(gl.DEPTH_TEST);document.onkeydown = handleKeyDown;document.onkeyup = handleKeyUp;canvas.onmousedown = handleMouseDown;document.onmouseup = handleMouseUp;document.onmousemove = handleMouseMove;drawFrame();
}


var gl; // global WebGL object
var shaderProgram;
var pics_names=['1.png', '2.png', '3.png', '4.png', '5.png', '6.png', '7.png'];
var pics_num=pics_names.length;
// diffirent initializations
function initGL(canvas) {try {gl = canvas.getContext('experimental-webgl');gl.viewportWidth = canvas.width;gl.viewportHeight = canvas.height;} catch (e) {}if (! gl) {alert('Can`t initialise WebGL, not supported');}
}
function getShader(gl, type) {var str = '';var shader;if (type == 'x-fragment') {str = "#ifdef GL_ES\n"+
"precision highp float;\n"+
"#endif\n"+
"varying vec2 vTextureCoord;\n"+
"uniform sampler2D uSampler;\n"+
"void main(void) {\n"+
"    gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));\n"+
"}\n";shader = gl.createShader(gl.FRAGMENT_SHADER);} else if (type == 'x-vertex') {str = "attribute vec3 aVertexPosition;\n"+
"attribute vec2 aTextureCoord;\n"+
"uniform mat4 uMVMatrix;\n"+
"uniform mat4 uPMatrix;\n"+
"varying vec2 vTextureCoord;\n"+
"void main(void) {\n"+
"    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);\n"+
"    vTextureCoord = aTextureCoord;\n"+
"}\n";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;
}
function initShaders() {var fragmentShader = getShader(gl, 'x-fragment');var vertexShader = getShader(gl, 'x-vertex');shaderProgram = gl.createProgram();gl.attachShader(shaderProgram, vertexShader);gl.attachShader(shaderProgram, fragmentShader);gl.linkProgram(shaderProgram);if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {alert('Can`t initialise shaders');}gl.useProgram(shaderProgram);shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, 'aVertexPosition');gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, 'aTextureCoord');gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, 'uPMatrix');shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, 'uMVMatrix');shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, 'uSampler');
}
var objVertexPositionBuffer=new Array();
var objVertexTextureCoordBuffer=new Array();
var objVertexIndexBuffer=new Array();
function initObjBuffers() {for (var i=0;i<pics_num;i=i+1) {objVertexPositionBuffer[i] = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, objVertexPositionBuffer[i]);vertices = [Math.cos(i*((2*Math.PI)/pics_num)), -0.5,  Math.sin(i*((2*Math.PI)/pics_num)),Math.cos(i*((2*Math.PI)/pics_num)), 0.5,  Math.sin(i*((2*Math.PI)/pics_num)),Math.cos((i+1)*((2*Math.PI)/pics_num)), 0.5, Math.sin((i+1)*((2*Math.PI)/pics_num)),Math.cos((i+1)*((2*Math.PI)/pics_num)), -0.5,  Math.sin((i+1)*((2*Math.PI)/pics_num)),];gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);objVertexPositionBuffer[i].itemSize = 3;objVertexPositionBuffer[i].numItems = 4;objVertexTextureCoordBuffer[i] = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER,  objVertexTextureCoordBuffer[i] );var textureCoords = [0.0, 0.0,0.0, 1.0,1.0, 1.0,1.0, 0.0,];gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);objVertexTextureCoordBuffer[i].itemSize = 2;objVertexTextureCoordBuffer[i].numItems = 4;objVertexIndexBuffer[i] = gl.createBuffer();gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, objVertexIndexBuffer[i]);var objVertexIndices = [0, 1, 2,0, 2, 3,];gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(objVertexIndices), gl.STATIC_DRAW);objVertexIndexBuffer[i].itemSize = 1;objVertexIndexBuffer[i].numItems = 6;}
}
function handleLoadedTexture(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, texture.image);gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);gl.bindTexture(gl.TEXTURE_2D, null);
}
var crateTextures = Array();
function initTexture(image) {var crateImage = new Image();var texture = gl.createTexture();texture.image = crateImage;crateImage.src = image;crateImage.onload = function () {handleLoadedTexture(texture)}return texture;
}
function initTextures() {for (var i=0; i < pics_num; i++) {crateTextures[i]=initTexture(pics_names[i]);}
}
var mvMatrix = mat4.create();
var mvMatrixStack = [];
var pMatrix = mat4.create();
function setMatrixUniforms() {gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
}
function degToRad(degrees) {return degrees * Math.PI / 180;
}
// mouse and keyboard handlers
var xRot = 0;
var xSpeed = 0;
var yRot = 0;
var ySpeed = 10;
var z = -3.0;
var currentlyPressedKeys = {};
function handleKeyDown(event) {currentlyPressedKeys[event.keyCode] = true;
}
function handleKeyUp(event) {currentlyPressedKeys[event.keyCode] = false;
}
function handleKeys() {if (currentlyPressedKeys[33]) { // Page Upz -= 0.05;}if (currentlyPressedKeys[34]) { // Page Downz += 0.05;}if (currentlyPressedKeys[37]) { // Left cursor keyySpeed -= 1;}if (currentlyPressedKeys[39]) { // Right cursor keyySpeed += 1;}if (currentlyPressedKeys[38]) { // Up cursor keyxSpeed -= 1;}if (currentlyPressedKeys[40]) { // Down cursor keyxSpeed += 1;}
}
var mouseDown = false;
var lastMouseX = null;
var lastMouseY = null;
var RotationMatrix = mat4.create();
mat4.identity(RotationMatrix);
function handleMouseDown(event) {mouseDown = true;lastMouseX = event.clientX;lastMouseY = event.clientY;
}
function handleMouseUp(event) {mouseDown = false;
}
function handleMouseMove(event) {if (!mouseDown) {return;}var newX = event.clientX;var newY = event.clientY;var deltaX = newX - lastMouseX;var newRotationMatrix = mat4.create();mat4.identity(newRotationMatrix);mat4.rotate(newRotationMatrix, degToRad(deltaX / 5), [0, 1, 0]);var deltaY = newY - lastMouseY;mat4.rotate(newRotationMatrix, degToRad(deltaY / 5), [1, 0, 0]);mat4.multiply(newRotationMatrix, RotationMatrix, RotationMatrix);lastMouseX = newXlastMouseY = newY;
}
// Draw scene and initialization
var MoveMatrix = mat4.create();
mat4.identity(MoveMatrix);
function drawScene() {gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);mat4.identity(mvMatrix);mat4.translate(mvMatrix, [0.0, 0.0, z]);mat4.rotate(mvMatrix, degToRad(xRot), [1, 0, 0]);mat4.rotate(mvMatrix, degToRad(yRot), [0, 1, 0]);mat4.multiply(mvMatrix, MoveMatrix);mat4.multiply(mvMatrix, RotationMatrix);for (var i=0;i<pics_num;i=i+1) {gl.bindBuffer(gl.ARRAY_BUFFER, objVertexPositionBuffer[i]);gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, objVertexPositionBuffer[i].itemSize, gl.FLOAT, false, 0, 0);gl.bindBuffer(gl.ARRAY_BUFFER, objVertexTextureCoordBuffer[i]);gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, objVertexTextureCoordBuffer[i].itemSize, gl.FLOAT, false, 0, 0);gl.activeTexture(gl.TEXTURE0);gl.bindTexture(gl.TEXTURE_2D, crateTextures[i]);gl.uniform1i(shaderProgram.samplerUniform, 0);gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, objVertexIndexBuffer[i]);setMatrixUniforms();gl.drawElements(gl.TRIANGLES, objVertexIndexBuffer[i].numItems, 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 drawFrame() {requestAnimFrame(drawFrame);handleKeys();drawScene();animate();
}
function initWebGl() {var canvas = document.getElementById('panel');initGL(canvas);initShaders();initObjBuffers();initTextures();gl.clearColor(1.0, 1.0, 1.0, 1.0);gl.enable(gl.DEPTH_TEST);document.onkeydown = handleKeyDown;document.onkeyup = handleKeyUp;canvas.onmousedown = handleMouseDown;document.onmouseup = handleMouseUp;document.onmousemove = handleMouseMove;drawFrame();
}

And again – long code, but most important. I separated all code to 3 sides: initializations, handlers and drawing of scene. Hope that you already read our previos WebGL lesson. In this case it will more easy to understand today`s code. Just make attention that instead color buffer we will using texture buffer (objVertexTextureCoordBuffer). Also, this demo able to work with any amouht of used images (better – more than 3).

再说一遍-长代码，但最重要。 我将所有代码分为3部分：初始化，处理程序和场景绘制。 希望您已经阅读了我们的previos WebGL课程 。 在这种情况下，更容易理解今天的代码。 请注意，我们将使用纹理缓冲区(objVertexTextureCoordBuffer)代替颜色缓冲区。 而且，该演示程序可以处理大量二手图像(更好–超过3个)。

步骤4.图片 (Step 4. Images)

All these images we will using for twisting:

我们将用于扭曲的所有这些图像：

1
1个
2
2
3
3
4
4
5
5
6
6
7
7
现场演示

结论 (Conclusion)

I hope you enjoyed today`s result. If you have any suggestions or ideas – share it :-) Welcome back our friends!

希望您喜欢今天的成绩。 如果您有任何建议或想法，请分享：-)欢迎回到我们的朋友身边！

翻译自: https://www.script-tutorials.com/twisting-images-webgl/

webgl不同图像不同纹理

这篇关于webgl不同图像不同纹理_在WebGl中创建键盘敏感的3D扭曲图像的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/581037。

相关文章

Linux线程之线程的创建、属性、回收、退出、取消方式

Linux线程之线程的创建、属性、回收、退出、取消方式

《Linux线程之线程的创建、属性、回收、退出、取消方式》文章总结了线程管理核心知识：线程号唯一、创建方式、属性设置（如分离状态与栈大小）、回收机制（join/detach）、退出方法（返回/pthr... 目录1. 线程号2. 线程的创建3. 线程属性4. 线程的回收5. 线程的退出6. 线程的取消7.
阅读更多...
创建Java keystore文件的完整指南及详细步骤

创建Java keystore文件的完整指南及详细步骤

《创建Javakeystore文件的完整指南及详细步骤》本文详解Java中keystore的创建与配置,涵盖私钥管理、自签名与CA证书生成、SSL/TLS应用,强调安全存储及验证机制,确保通信加密和... 目录1. 秘密键（私钥）的理解与管理私钥的定义与重要性私钥的管理策略私钥的生成与存储2. 证书的创建与
阅读更多...
使用Python绘制3D堆叠条形图全解析

使用Python绘制3D堆叠条形图全解析

《使用Python绘制3D堆叠条形图全解析》在数据可视化的工具箱里,3D图表总能带来眼前一亮的效果,本文就来和大家聊聊如何使用Python实现绘制3D堆叠条形图,感兴趣的小伙伴可以了解下... 目录为什么选择 3D 堆叠条形图代码实现：从数据到 3D 世界的搭建核心代码逐行解析细节优化应用场景：3D 堆叠图
阅读更多...
python如何创建等差数列

python如何创建等差数列

《python如何创建等差数列》：本文主要介绍python如何创建等差数列的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录python创建等差数列例题运行代码回车输出结果总结python创建等差数列import numpy as np x=int(in
阅读更多...
怎么用idea创建一个SpringBoot项目

怎么用idea创建一个SpringBoot项目

《怎么用idea创建一个SpringBoot项目》本文介绍了在IDEA中创建SpringBoot项目的步骤,包括环境准备（JDK1.8+、Maven3.2.5+）、使用SpringInitializr... 目录如何在idea中创建一个SpringBoot项目环境准备1.1打开IDEA，点击New新建一个项
阅读更多...
如何使用Maven创建web目录结构

如何使用Maven创建web目录结构

《如何使用Maven创建web目录结构》：本文主要介绍如何使用Maven创建web目录结构的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录创建web工程第一步第二步第三步第四步第五步第六步第七步总结创建web工程第一步js通过Maven骨架创pytho
阅读更多...
MySQL 用户创建与授权最佳实践

MySQL 用户创建与授权最佳实践

《MySQL用户创建与授权最佳实践》在MySQL中,用户管理和权限控制是数据库安全的重要组成部分,下面详细介绍如何在MySQL中创建用户并授予适当的权限,感兴趣的朋友跟随小编一起看看吧... 目录mysql 用户创建与授权详解一、MySQL用户管理基础1. 用户账户组成2. 查看现有用户二、创建用户1. 基
阅读更多...
Python中使用uv创建环境及原理举例详解

Python中使用uv创建环境及原理举例详解

《Python中使用uv创建环境及原理举例详解》uv是Astral团队开发的高性能Python工具,整合包管理、虚拟环境、Python版本控制等功能,：本文主要介绍Python中使用uv创建环境及... 目录一、uv工具简介核心特点：二、安装uv1. 通过pip安装2. 通过脚本安装验证安装：配置镜像源（可
阅读更多...
Java中实现线程的创建和启动的方法

Java中实现线程的创建和启动的方法

《Java中实现线程的创建和启动的方法》在Java中,实现线程的创建和启动是两个不同但紧密相关的概念,理解为什么要启动线程（调用start()方法）而非直接调用run()方法,是掌握多线程编程的关键,... 目录1. 线程的生命周期2. start() vs run() 的本质区别3. 为什么必须通过 st
阅读更多...
Macos创建python虚拟环境的详细步骤教学

Macos创建python虚拟环境的详细步骤教学

《Macos创建python虚拟环境的详细步骤教学》在macOS上创建Python虚拟环境主要通过Python内置的venv模块实现,也可使用第三方工具如virtualenv,下面小编来和大家简单聊聊... 目录一、使用 python 内置 venv 模块（推荐）二、使用 virtualenv（兼容旧版 P
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2