Search Results

Search found 3 results on 1 pages for 'mathacka'.

Page 1/1 | 1 

  • Need to know the origin and coordinates for 2d texture and 2d/3d vertices in webgl

    - by mathacka
    Long story short, I know my coordinates are off and I believe my indices might be off. I'm trying to render a simple 2d rectangle with a texture in webgl here's the code I have for the vbo/ibo: rectVertices.vertices = new Float32Array( [ -0.5, -0.5, // Vertice 1, bottom / left 0.0, 0.0, // UV 1 -0.5, 0.5, // Vertice 2, top / left 0.0, 1.0, // UV 2 0.5, 0.5, // Vertice 3, top / right 1.0, 1.0, // UV 3 0.5, -0.5, // Vertice 4, bottom / right 1.0, 0.0, // UV 4 ]); rectVertices.indices = new Int16Array([ 1,2,3,1,3,4 ]); /* I'm assuming the vertices go like this (-0.5, 0.5) ------ ( 0.5, 0.5) | | | | (-0.5,-0.5) ------ ( 0.5,-0.5) with the origin in the middle and the texture coordinates go like this: ( 0.0, 1.0) ------ ( 1.0, 1.0) | | | | ( 0.0, 0.0) ------ ( 1.0, 0.0) so as you can see I'm all messed up. I'm also using: gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); */ So, I need to know the origins.

    Read the article

  • Having a problem with texturing vertices in WebGL, think parameters are off in the image?

    - by mathacka
    I'm having a problem texturing a simple rectangle in my WebGL program, I have the parameters set as follows: gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureImage); I'm using this image: On the properties of this image it says it's 32 bit depth, so that should take care of the gl.UNSIGNED_BYTE, and I've tried both gl.RGBA and gl.RGB to see if it's not reading the transparency. It is a 32x32 pixel image, so it's power of 2. And I've tried almost all the combinations of formats and types, but I'm not sure if this is the answer or not. I'm getting these two errors in the chrome console: INVALID_VALUE: texImage2D: invalid image (index):101 WebGL: drawArrays: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete'. Or the texture is Float or Half Float type with linear filtering while OES_float_linear or OES_half_float_linear extension is not enabled. the drawArrays function is simply: "gl.drawArrays(gl.TRIANGLES, 0, 6);" using 6 vertices to make a rectangle.

    Read the article

  • WebGL CORS error loading simple texture in Chrome

    - by mathacka
    Here's my code: function loadTexture() { textureImage = new Image(); textureImage.onload = function() { setupTexture(); } textureImage.src = "jumper2.png"; } function setupTexture() { texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, texture); gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); // this next line has the error: Uncaught SecurityError: An attempt was made to break through the security policy of the user agent. gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureImage); gl.texParameteri(gl.TEXTURE_2D, gl.OES_TEXTURE_FLOAT_LINEAR, gl.NEAREST); if (!gl.isTexture(texture)) { alert("Error: Texture is invalid"); } glProgram.samplerUniform = gl.getUniformLocation(glProgram, "uSampler"); gl.uniform1i(glProgram.samplerUniform, 0); } I've researched it and it is a CORS error a "Cross-origin resource sharing" error, but it's a local file! I can't figure out what's wrong. I did make the picture using gimp, and I'm not sure the coding was right on the export, but I eliminated a previous error using "gl.OES_TEXTURE_FLOAT_LINEAR".

    Read the article

1