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。

相关文章

使用Python开发一个图像标注与OCR识别工具

使用Python开发一个图像标注与OCR识别工具

《使用Python开发一个图像标注与OCR识别工具》：本文主要介绍一个使用Python开发的工具,允许用户在图像上进行矩形标注,使用OCR对标注区域进行文本识别,并将结果保存为Excel文件,感兴... 目录项目简介1. 图像加载与显示2. 矩形标注3. OCR识别4. 标注的保存与加载5. 裁剪与重置图像
阅读更多...
Python中conda虚拟环境创建及使用小结

Python中conda虚拟环境创建及使用小结

《Python中conda虚拟环境创建及使用小结》本文主要介绍了Python中conda虚拟环境创建及使用小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们... 目录0.前言1.Miniconda安装2.conda本地基本操作3.创建conda虚拟环境4.激活c
阅读更多...
使用Python创建一个能够筛选文件的PDF合并工具

使用Python创建一个能够筛选文件的PDF合并工具

《使用Python创建一个能够筛选文件的PDF合并工具》这篇文章主要为大家详细介绍了如何使用Python创建一个能够筛选文件的PDF合并工具,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下... 目录背景主要功能全部代码代码解析1. 初始化 wx.Frame 窗口2. 创建工具栏3. 创建布局和界面控件4
阅读更多...
Java中对象的创建和销毁过程详析

Java中对象的创建和销毁过程详析

《Java中对象的创建和销毁过程详析》：本文主要介绍Java中对象的创建和销毁过程,对象的创建过程包括类加载检查、内存分配、初始化零值内存、设置对象头和执行init方法,对象的销毁过程由垃圾回收机... 目录前言对象的创建过程1. 类加载检查2China编程. 分配内存3. 初始化零值4. 设置对象头5. 执行
阅读更多...
Android 悬浮窗开发示例((动态权限请求 | 前台服务和通知 | 悬浮窗创建 )

Android 悬浮窗开发示例((动态权限请求 | 前台服务和通知 | 悬浮窗创建 )

《Android悬浮窗开发示例((动态权限请求|前台服务和通知|悬浮窗创建)》本文介绍了Android悬浮窗的实现效果,包括动态权限请求、前台服务和通知的使用,悬浮窗权限需要动态申请并引导... 目录一、悬浮窗 动态权限请求1、动态请求权限2、悬浮窗权限说明3、检查动态权限4、申请动态权限5、权限设置完毕后
阅读更多...
Python如何计算两个不同类型列表的相似度

Python如何计算两个不同类型列表的相似度

《Python如何计算两个不同类型列表的相似度》在编程中,经常需要比较两个列表的相似度,尤其是当这两个列表包含不同类型的元素时,下面小编就来讲讲如何使用Python计算两个不同类型列表的相似度吧... 目录摘要引言数字类型相似度欧几里得距离曼哈顿距离字符串类型相似度Levenshtein距离Jaccard相
阅读更多...
在不同系统间迁移Python程序的方法与教程

在不同系统间迁移Python程序的方法与教程

《在不同系统间迁移Python程序的方法与教程》本文介绍了几种将Windows上编写的Python程序迁移到Linux服务器上的方法,包括使用虚拟环境和依赖冻结、容器化技术（如Docker）、使用An... 目录使用虚拟环境和依赖冻结1. 创建虚拟环境2. 冻结依赖使用容器化技术（如 docker）1. 创
阅读更多...
关于Spring @Bean 相同加载顺序不同结果不同的问题记录

关于Spring @Bean 相同加载顺序不同结果不同的问题记录

《关于Spring@Bean相同加载顺序不同结果不同的问题记录》本文主要探讨了在Spring5.1.3.RELEASE版本下,当有两个全注解类定义相同类型的Bean时,由于加载顺序不同,最终生成的... 目录问题说明测试输出1测试输出2@Bean注解的BeanDefiChina编程nition加入时机总结问题说明
阅读更多...
Python创建Excel的4种方式小结

Python创建Excel的4种方式小结

《Python创建Excel的4种方式小结》这篇文章主要为大家详细介绍了Python中创建Excel的4种常见方式,文中的示例代码简洁易懂,具有一定的参考价值,感兴趣的小伙伴可以学习一下... 目录库的安装代码1——pandas代码2——openpyxl代码3——xlsxwriterwww.cppcns.c
阅读更多...
使用Python在Excel中创建和取消数据分组

使用Python在Excel中创建和取消数据分组

《使用Python在Excel中创建和取消数据分组》Excel中的分组是一种通过添加层级结构将相邻行或列组织在一起的功能,当分组完成后,用户可以通过折叠或展开数据组来简化数据视图,这篇博客将介绍如何使... 目录引言使用工具python在Excel中创建行和列分组Python在Excel中创建嵌套分组Pyt
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2