0
Je me suis cogné la tête contre le mur pendant un moment. J'utilise webgl et j'ai des ensembles de sommets. (Les x, y et z sont les mêmes mais j'inclue aussi u, v pour la texture.)
Un ensemble va de 0 à 1 pour la texture et l'autre va de 0 à 10 (afin de répéter la texture.Changement des tampons de réseau Webgl préservant les coordonnées uv
Cependant, selon la configuration mémoire tampon de tableau I dernier, qui est le seul UV utilisé.
//SETUP Crate Texture
var crateBuffer = gl.createBuffer();
setupIndBuffers(gl,program,crateBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(crateVerts),gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
//Setup brick vertex buffer (and UV)
var brickBuffer = gl.createBuffer();
setupIndBuffers(gl,program,brickBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(brickVerts),gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
Cela se traduira par la texture étant répétée 10 fois
Cependant,
//Setup brick vertex buffer (and UV)
var brickBuffer = gl.createBuffer();
setupIndBuffers(gl,program,brickBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(brickVerts),gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
//SETUP Crate Texture
var crateBuffer = gl.createBuffer();
setupIndBuffers(gl,program,crateBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(crateVerts),gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
Cela rendra la texture non répétitive. À l'origine, j'ai essayé de mettre le tampon de tableau à l'intérieur des objets et j'ai pensé qu'il s'agissait d'un problème de liaison javaScript. Cependant, cela ne semble pas être le problème.
Toutes les suggestions ou conseils seraient les bienvenus.
Voici mon code entier:
\t \t //SHADER TEXT
\t \t
\t var vertexShaderText =
\t [
\t 'precision mediump float;',
\t '',
\t 'attribute vec3 vertPosition;',
\t 'attribute vec2 vertTexCoord;',
\t 'varying vec2 fragTexCoord;',
\t 'uniform vec3 theta;',
\t 'uniform vec3 trans;',
\t 'uniform float thetaC;',
\t 'uniform vec3 camLoc;',
\t 'void main()',
\t '{',
\t 'fragTexCoord = vertTexCoord;',
\t 'vec3 c = cos(theta);',
\t 'vec3 s = sin(theta);',
\t '',
\t 'mat4 ry = mat4(c.y,0.0,-1.0*s.y,0.0,0.0,1.0,0.0,0.0,s.y,0.0,c.y,0.0,0.0,0.0,0.0,1.0);',
\t 'mat4 translate = mat4(1,0,0,0,0,1,0,0,0,0,1,0, \t trans.x,trans.y,trans.z,1);',
\t 'vec4 tempLoc = vec4(vertPosition,1.0);',
\t
\t 'float l = -1.0;',
\t 'float r = 1.0;',
\t 'float t = 1.0;',
\t 'float b = -1.0;',
\t 'float f = 100.0;',
\t 'float n = 1.0;',
\t 'mat4 perspective = mat4(2.0*n/(r-l),0,0,0, 0,2.0*n/(t-b),0,0, (r+l)/(r-l),(t+b)/(t-b),-1.0*(f+n)/(f-n),-1.0, 0,0,-2.0*f*n/(f-n),0);',
\t
\t 'float tempc = cos(thetaC);',
\t 'float temps = sin(thetaC);',
\t 'mat4 camRY = mat4(tempc,0,-1.0*temps,0, 0,1,0,0, temps,0,tempc,0, 0,0,0,1);',
\t 'mat4 viewM = mat4(1.0,0,0,0, 0,1.0,0,0, 0,0,1.0,0, camLoc.x,camLoc.y,camLoc.z,1.0);',
\t 'gl_Position = perspective* camRY*viewM* translate * ry* tempLoc;',
\t '}'
\t ].join("\n");
\t
\t var fragmentShaderText =
\t [
\t 'precision mediump float;',
\t 'varying vec2 fragTexCoord;',
\t 'uniform sampler2D sampler;//samplers appear in order defined',
\t 'void main()',
\t '{',
\t 'gl_FragColor = texture2D(sampler,fragTexCoord);',
\t '}'
\t ].join('\n');
\t
\t function getGL()
\t { \t
\t \t var c = document.getElementById("MyScreen"); \t
\t \t var gl = c.getContext("webgl")||c.getContext("experimental-webgl");
\t \t if(!gl)
\t \t {
\t \t \t alert("WEBGL IS NOT AVAILABLE");
\t \t }
\t \t gl.viewport(0,0,c.width, c.height);
\t \t gl.clearColor(.6,.6,1.0,1.0);
\t \t gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
\t \t
\t \t //VERY IMPORTANT
\t \t gl.enable(gl.DEPTH_TEST);
\t \t
\t \t return gl;
\t }
\t
\t function initShaderProgram(gl)
\t {
\t \t //Setup shaders
\t \t var vertexShader = gl.createShader(gl.VERTEX_SHADER);
\t \t var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
\t \t
\t \t gl.shaderSource(vertexShader,vertexShaderText);
\t \t gl.shaderSource(fragmentShader,fragmentShaderText);
\t \t gl.compileShader(vertexShader);
\t \t if(!gl.getShaderParameter(vertexShader,gl.COMPILE_STATUS))
\t \t {
\t \t \t console.log("ERROR: ",gl.getShaderInfoLog(vertexShader));
\t \t }
\t \t gl.compileShader(fragmentShader);
\t \t if(!gl.getShaderParameter(fragmentShader,gl.COMPILE_STATUS))
\t \t {
\t \t \t console.log("ERROR: ",gl.getShaderInfoLog(fragmentShader));
\t \t }
\t \t
\t \t //Setup program
\t \t var program = gl.createProgram();
\t \t gl.attachShader(program, vertexShader);
\t \t gl.attachShader(program, fragmentShader);
\t \t gl.linkProgram(program);
\t \t if(!gl.getProgramParameter(program,gl.LINK_STATUS))
\t \t {
\t \t \t console.error('ERROR', gl.getShaderInfoLog(program));
\t \t }
\t \t gl.validateProgram(program);
\t \t if(!gl.getProgramParameter(program,gl.VALIDATE_STATUS))
\t \t {
\t \t \t console.error('ERROR', gl.getShaderInfoLog(program));
\t \t }
\t \t return program;
\t }
\t var brickTexture;
\t var checkeredTexture;
\t var XTexture;
\t
\t function setupIndBuffers(gl,program, buff)
\t {
\t \t gl.bindBuffer(gl.ARRAY_BUFFER,buff); \t \t
\t \t positionAttributeLcoation = gl.getAttribLocation(program,'vertPosition');
\t \t texCoordAttributeLocation = gl.getAttribLocation(program,'vertTexCoord');
\t \t gl.vertexAttribPointer(
\t \t positionAttributeLcoation, //ATTRIBUTE LOCATION
\t \t 3, //NUMBER of elements per attribute
\t \t gl.FLOAT, //TYPES OF ELEMENTS
\t \t gl.FALSE,
\t \t 5*Float32Array.BYTES_PER_ELEMENT, //SIZE OF AN INDIVIDUAL VERTEX
\t \t 0 //OFFSET
\t \t);
\t \t
\t \t
\t \t gl.vertexAttribPointer(
\t \t texCoordAttributeLocation, //ATTRIBUTE LOCATION
\t \t 2, //NUMBER of elements per attribute
\t \t gl.FLOAT, //TYPES OF ELEMENTS
\t \t gl.FALSE,
\t \t 5*Float32Array.BYTES_PER_ELEMENT, //SIZE OF AN INDIVIDUAL VERTEX
\t \t 3*Float32Array.BYTES_PER_ELEMENT //OFFSET
\t \t);
\t \t
\t \t gl.enableVertexAttribArray(positionAttributeLcoation);
\t \t gl.enableVertexAttribArray(texCoordAttributeLocation);
\t }
\t
\t function setupVertices(gl,program)
\t {
\t \t checkeredTexture = gl.createTexture();
\t \t gl.bindTexture(gl.TEXTURE_2D, checkeredTexture);
\t \t //Sets up our S
\t \t gl.texParameteri(gl.TEXTURE_2D, \t gl.TEXTURE_WRAP_S,gl.REPEAT); //gl.MIRRORED_REPEAT//gl.CLAMP_TO_EDGE
\t \t //Sets up our T
\t \t gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T,gl.REPEAT); //gl.MIRRORED_REPEAT//gl.CLAMP_TO_EDGE
\t \t gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER, gl.NEAREST);
\t \t gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.NEAREST);
\t \t //Actually get our texture;
\t \t var myPic = [];
\t \t for(i =0; i < 16; i ++)
\t \t {
\t \t \t for(j =0; j< 16; j ++)
\t \t \t {
\t \t \t \t if(i%2 == j%2)
\t \t \t \t {
\t \t \t \t \t //Push red
\t \t \t \t \t myPic.push(0,255,0,255);
\t \t \t \t }
\t \t \t \t else
\t \t \t \t {
\t \t \t \t \t myPic.push(128,255,128,255);
\t \t \t \t } \t
\t \t \t }
\t \t }
\t \t gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,16,16,0,gl.RGBA,gl.UNSIGNED_BYTE,new Uint8Array(myPic));
\t \t gl.bindTexture(gl.TEXTURE_2D,null);
\t \t //
\t \t //
\t \t //
\t \t //Brick Texture
\t \t //
\t \t //
\t \t brickTexture = gl.createTexture();
\t \t gl.bindTexture(gl.TEXTURE_2D, brickTexture);
\t \t //Sets up our S
\t \t gl.texParameteri(gl.TEXTURE_2D, \t gl.TEXTURE_WRAP_S, gl.MIRRORED_REPEAT);//gl.CLAMP_TO_EDGE
\t \t //Sets up our T
\t \t gl.texParameteri(gl.TEXTURE_2D, \t gl.TEXTURE_WRAP_T,gl.MIRRORED_REPEAT);//gl.CLAMP_TO_EDGE
\t \t gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER, gl.NEAREST);
\t \t gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.NEAREST);
\t \t var myPic2 = [];
\t \t for(i =0; i < 16; i ++)
\t \t {
\t \t \t for(j =0; j< 16; j ++)
\t \t \t {
\t \t \t \t if(i == 0 || j ==0)
\t \t \t \t {
\t \t \t \t \t //Push Black
\t \t \t \t \t myPic2.push(0,0,0,255);
\t \t \t \t }
\t \t \t \t else
\t \t \t \t {
\t \t \t \t \t myPic2.push(255,30,30,255);
\t \t \t \t }
\t \t \t \t
\t \t \t }
\t \t }
\t \t gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,16,16,0,gl.RGBA,gl.UNSIGNED_BYTE,new Uint8Array(myPic2));
\t \t gl.bindTexture(gl.TEXTURE_2D,null);
\t \t
\t \t //
\t \t //X TEXTURE/
\t \t //
\t \t XTexture = gl.createTexture();
\t \t gl.bindTexture(gl.TEXTURE_2D, XTexture);
\t \t //Sets up our S
\t \t gl.texParameteri(gl.TEXTURE_2D, \t gl.TEXTURE_WRAP_S, gl.MIRRORED_REPEAT);//gl.CLAMP_TO_EDGE
\t \t //Sets up our T
\t \t gl.texParameteri(gl.TEXTURE_2D, \t gl.TEXTURE_WRAP_T,gl.MIRRORED_REPEAT);//gl.CLAMP_TO_EDGE
\t \t gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER, gl.NEAREST);
\t \t gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.NEAREST);
\t \t var myPic2 = [];
\t \t for(i =0; i < 16; i ++)
\t \t {
\t \t \t for(j =0; j< 16; j ++)
\t \t \t {
\t \t \t \t if(i == 0 || j ==0 || i == 15 || j == 15 || i ==j || i+j == 15)
\t \t \t \t {
\t \t \t \t \t //Push red
\t \t \t \t \t myPic2.push(0,0,0,255);
\t \t \t \t }
\t \t \t \t else
\t \t \t \t {
\t \t \t \t \t myPic2.push(137,63,69,255);
\t \t \t \t }
\t \t \t \t
\t \t \t }
\t \t }
\t \t gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,16,16,0,gl.RGBA,gl.UNSIGNED_BYTE,new Uint8Array(myPic2));
\t \t gl.bindTexture(gl.TEXTURE_2D,null); \t
\t \t gl.activeTexture(gl.TEXTURE0); \t
\t }
\t
\t //
\t //Initializing the GL context
\t //
\t
\t brickVerts =
\t \t [
\t \t \t // X, Y, Z \t U, V, \t
\t \t // Top
\t \t -1.0, 1.0, -1.0, 0.0, 0.0,
\t \t -1.0, 1.0, 1.0, 0.0, 10,
\t \t 1.0, 1.0, 1.0, 10, 10,
\t \t 1.0, 1.0, -1.0, 10, 0.0,
\t \t // Left
\t \t -1.0, 1.0, 1.0, 10,10,
\t \t -1.0, -1.0, 1.0, 0,10,
\t \t -1.0, -1.0, -1.0, 0,0,
\t \t -1.0, 1.0, -1.0, 10,0,
\t \t // Right
\t \t 1.0, 1.0, 1.0, 10,10,
\t \t 1.0, -1.0, 1.0, 0,10,
\t \t 1.0, -1.0, -1.0, 0,0,
\t \t 1.0, 1.0, -1.0, 10,0,
\t \t // Front
\t \t 1.0, 1.0, 1.0, 10,10,
\t \t 1.0, -1.0, 1.0, 10,0,
\t \t -1.0, -1.0, 1.0, 0,0,
\t \t -1.0, 1.0, 1.0, 0,10,
\t \t // Back
\t \t 1.0, 1.0, -1.0, 10,10,
\t \t 1.0, -1.0, -1.0, 10,0,
\t \t -1.0, -1.0, -1.0, 0,0,
\t \t -1.0, 1.0, -1.0, 0,10,
\t \t // Bottom
\t \t -1.0, -1.0, -1.0, 0,0,
\t \t -1.0, -1.0, 1.0, 0,10,
\t \t 1.0, -1.0, 1.0, 10,10,
\t \t 1.0, -1.0, -1.0, 10,0,
\t \t ];
\t
\t crateVerts = [
\t \t \t // X, Y, Z \t U, V, \t
\t \t // Top
\t \t -1.0, 1.0, -1.0, 0.0, 0.0,
\t \t -1.0, 1.0, 1.0, 0.0, 1.0,
\t \t 1.0, 1.0, 1.0, 1.0, 1.0,
\t \t 1.0, 1.0, -1.0, 1.0, 0.0,
\t \t // Left
\t \t -1.0, 1.0, 1.0, 1,1,
\t \t -1.0, -1.0, 1.0, 0,1,
\t \t -1.0, -1.0, -1.0, 0,0,
\t \t -1.0, 1.0, -1.0, 1,0,
\t \t // Right
\t \t 1.0, 1.0, 1.0, 1,1,
\t \t 1.0, -1.0, 1.0, 0,1,
\t \t 1.0, -1.0, -1.0, 0,0,
\t \t 1.0, 1.0, -1.0, 1,0,
\t \t // Front
\t \t 1.0, 1.0, 1.0, 1,1,
\t \t 1.0, -1.0, 1.0, 1,0,
\t \t -1.0, -1.0, 1.0, 0,0,
\t \t -1.0, 1.0, 1.0, 0,1,
\t \t // Back
\t \t 1.0, 1.0, -1.0, 1,1,
\t \t 1.0, -1.0, -1.0, 1,0,
\t \t -1.0, -1.0, -1.0, 0,0,
\t \t -1.0, 1.0, -1.0, 0,1,
\t \t // Bottom
\t \t -1.0, -1.0, -1.0, 0,0,
\t \t -1.0, -1.0, 1.0, 0,1,
\t \t 1.0, -1.0, 1.0, 1,1,
\t \t 1.0, -1.0, -1.0, 1,0,
\t \t ];
\t
\t \t class cube
\t \t {
\t \t \t constructor(test)
\t \t \t {
\t \t \t \t this.tranLoc = gl.getUniformLocation(program,'trans');
\t \t \t \t this.thetaLoc = gl.getUniformLocation(program,'theta');
\t \t \t \t this.loc = [0,0,0];
\t \t \t \t if(test)
\t \t \t \t {
\t \t \t \t \t this.verts = brickBuffer;
\t \t \t \t \t this.tex = brickTexture;
\t \t \t \t }
\t \t \t \t else
\t \t \t \t {
\t \t \t \t \t this.verts = crateBuffer;
\t \t \t \t \t this.tex = XTexture;
\t \t \t \t }
\t \t \t \t this.boxIndices =
\t \t \t \t [// Top
\t \t \t \t 0, 1, 2,
\t \t \t \t 0, 2, 3,
\t \t \t \t // Left
\t \t \t \t 5, 4, 6,
\t \t \t \t 6, 4, 7,
\t \t \t \t // Right
\t \t \t \t 8, 9, 10,
\t \t \t \t 8, 10, 11,
\t \t \t \t // Front
\t \t \t \t 13, 12, 14,
\t \t \t \t 15, 14, 12,
\t \t \t \t // Back
\t \t \t \t 16, 17, 18,
\t \t \t \t 16, 18, 19,
\t \t \t \t // Bottom
\t \t \t \t 21, 20, 22,
\t \t \t \t 22, 20, 23 \t \t \t \t ];
\t \t \t \t this.iBuffer = gl.createBuffer();
\t \t \t \t gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,this.iBuffer);
\t \t \t \t gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,new Uint8Array(this.boxIndices),gl.STATIC_DRAW);
\t \t \t \t gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,null);
\t \t \t \t
\t \t \t }
\t \t \t render()
\t \t \t {
\t \t \t \t gl.bindBuffer(gl.ARRAY_BUFFER,this.verts);
\t \t \t \t gl.bindTexture(gl.TEXTURE_2D, this.tex);
\t \t \t \t gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,this.iBuffer);
\t \t \t \t var thetaV = [0,0,0];
\t \t \t \t gl.uniform3fv(this.tranLoc,new Float32Array(this.loc));
\t \t \t \t gl.uniform3fv(this.thetaLoc,new Float32Array(thetaV));
\t \t \t \t gl.drawElements(gl.TRIANGLES,this.boxIndices.length,gl.UNSIGNED_BYTE,0);
\t \t \t \t gl.bindTexture(gl.TEXTURE_2D,null); \t
\t \t \t \t gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,null);
\t \t \t \t gl.bindBuffer(gl.ARRAY_BUFFER,null);
\t \t \t }
\t \t
\t \t }
//Init GL System
\t var gl = getGL();
\t var program = initShaderProgram(gl);
\t setupVertices(gl,program);
\t gl.useProgram(program);
\t \t
\t
\t //Setup brick vertex buffer (and UV)
\t var brickBuffer = gl.createBuffer();
\t setupIndBuffers(gl,program,brickBuffer);
\t gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(brickVerts),gl.STATIC_DRAW);
\t gl.bindBuffer(gl.ARRAY_BUFFER, null);
\t
\t //SETUP Crate Texture
\t var crateBuffer = gl.createBuffer();
\t setupIndBuffers(gl,program,crateBuffer);
\t gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(crateVerts),gl.STATIC_DRAW);
\t gl.bindBuffer(gl.ARRAY_BUFFER, null);
\t
\t //Initialize and render actual objects.
\t var x = new cube(true);
\t x.loc = [-5,0,-10];
\t var y = new cube(false);
\t y.loc = [5,0,-10];
\t var loop = function()
\t {
\t gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
\t x.render();
\t y.render();
\t requestAnimationFrame(loop);
\t }
\t requestAnimationFrame(loop);\t <img id="tex" src = "https://opengameart.org/sites/default/files/cratetex.png" alt="texture" width = "0" height = "0" />
\t \t <CANVAS ID ="MyScreen" width="400" Height="250" alt="Your browser does not support canvas"></CANVAS>
\t
\t
Wow, je vous remercie beaucoup. Je pensais que je n'avais qu'à appeler vertexAtribPointer une fois lors de l'initialisation. –