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 !
好的，下载示例文件并开始编码！
Here are html sources of our demo. As you can see – just empty page.
这是我们的演示的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="/">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="/">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>
Here are used CSS styles.
这是使用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;
}
These files we will use in project for working with WebGL. Both files will in our package.
我们将在项目中使用这些文件来使用WebGL。 这两个文件都将放在我们的程序包中。
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 = Context('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_ESn"+
"precision highp float;n"+
"#endifn"+
"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);glpileShader(shader);if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {ShaderInfoLog(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);ureCoordAttribute = gl.getAttribLocation(shaderProgram, 'aTextureCoord');gl.ureCoordAttribute);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 = [s(i*((2*Math.PI)/pics_num)), -0.5, Math.sin(i*((2*Math.PI)/pics_num)),s(i*((2*Math.PI)/pics_num)), 0.5, Math.sin(i*((2*Math.PI)/pics_num)),s((i+1)*((2*Math.PI)/pics_num)), 0.5, Math.sin((i+1)*((2*Math.PI)/pics_num)),s((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 = load = function () {handleLoadedTexture(texture)}return texture;
}
function initTextures() {for (var i=0; i < pics_num; i++) {crateTextures[i]=initTexture(pics_names[i]);}
}
var mvMatrix = ate();
var mvMatrixStack = [];
var pMatrix = ate();
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 = ate();
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 = ate();mat4.identity(newRotationMatrix);ate(newRotationMatrix, degToRad(deltaX / 5), [0, 1, 0]);var deltaY = newY - ate(newRotationMatrix, degToRad(deltaY / 5), [1, 0, 0]);mat4.multiply(newRotationMatrix, RotationMatrix, RotationMatrix);lastMouseX = newXlastMouseY = newY;
}
// Draw scene and initialization
var MoveMatrix = ate();
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);anslate(mvMatrix, [0.0, 0.0, z]);ate(mvMatrix, degToRad(xRot), [1, 0, 0]);ate(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.ureCoordAttribute, 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 = ElementById('panel');initGL(canvas);initShaders();initObjBuffers();initTextures();gl.clearColor(1.0, 1.0, 1.0, 1.0);gl.enable(gl.DEPTH_TEST);keydown = keyup = usedown = useup = usemove = 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 = Context('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_ESn"+
"precision highp float;n"+
"#endifn"+
"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);glpileShader(shader);if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {ShaderInfoLog(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);ureCoordAttribute = gl.getAttribLocation(shaderProgram, 'aTextureCoord');gl.ureCoordAttribute);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 = [s(i*((2*Math.PI)/pics_num)), -0.5, Math.sin(i*((2*Math.PI)/pics_num)),s(i*((2*Math.PI)/pics_num)), 0.5, Math.sin(i*((2*Math.PI)/pics_num)),s((i+1)*((2*Math.PI)/pics_num)), 0.5, Math.sin((i+1)*((2*Math.PI)/pics_num)),s((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 = load = function () {handleLoadedTexture(texture)}return texture;
}
function initTextures() {for (var i=0; i < pics_num; i++) {crateTextures[i]=initTexture(pics_names[i]);}
}
var mvMatrix = ate();
var mvMatrixStack = [];
var pMatrix = ate();
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 = ate();
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 = ate();mat4.identity(newRotationMatrix);ate(newRotationMatrix, degToRad(deltaX / 5), [0, 1, 0]);var deltaY = newY - ate(newRotationMatrix, degToRad(deltaY / 5), [1, 0, 0]);mat4.multiply(newRotationMatrix, RotationMatrix, RotationMatrix);lastMouseX = newXlastMouseY = newY;
}
// Draw scene and initialization
var MoveMatrix = ate();
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);anslate(mvMatrix, [0.0, 0.0, z]);ate(mvMatrix, degToRad(xRot), [1, 0, 0]);ate(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.ureCoordAttribute, 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 = ElementById('panel');initGL(canvas);initShaders();initObjBuffers();initTextures();gl.clearColor(1.0, 1.0, 1.0, 1.0);gl.enable(gl.DEPTH_TEST);keydown = keyup = usedown = useup = usemove = 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个)。
All these images we will using for twisting:
我们将用于扭曲的所有这些图像：
I hope you enjoyed today`s result. If you have any suggestions or ideas – share it :-) Welcome back our friends!
希望您喜欢今天的成绩。 如果您有任何建议或想法，请分享：-)欢迎回到我们的朋友身边！
翻译自: /
webgl不同图像不同纹理
本文发布于:2024-01-30 19:05:15，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170661271922176.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
