solved Problem with UV, in custom mesh

[Pryme8]

So I have the vertex data:
vDat.positions = 
        [
            w*-0.5, h*0.5, 0,//0
            w*0.5,  h*0.5, 0,//1
            w*0.5,  h*-0.5, 0,//2
            w*-0.5, h*-0.5, 0 //3
        ];
        vDat.uvs = 
        [
            0,1,
            1,1,
            1,0,
            0,0
        ];
        vDat.normals = 
        [
            0.0,  0.0, 1.0,//0
            0.0,  0.0, 1.0,//1
            0.0,  0.0, 1.0,//2
            0.0,  0.0, 1.0 //3
        ];
        vDat.indices =
        [
        2,1,0,
        3,2,0        
        ];

which seems to create the object just fine,  but later on now as I started working with the uv, it seems to not be correct.
You can see the page here: http://pryme8.github.io/Lessons/Section I/uv.html

where the mesh is coming back as grey, which is making me think that the uv is 0.5 across the board for some  reason when I set the fragement shader to something like:

precision highp float;
//Varyings
varying vec2 vUV;
    
void main(void) {
    vec3 color = vec3(vUV.x, vUV.y, vUV.y);
    gl_FragColor = vec4(color, 1.0);
}

its prolly something dumb that I am over looking.
 

[Guest]

Are you sure that the mesh is rendered?

What does Spector.js think about that?

[Pryme8]

Ill take a look when I get home here on spector (I cant have extensions on my browser at work)

Its looking like its a shader error not a uv error now though, because I changed the method for creating the plane to use a built in method and its still the same results.

[Pryme8]

I have no idea what I am looking at with the spector.js


This is the last thing on the stack i guess?

Global

• name: drawElements (Open help page)
• duration: 0
• status: Unknown

Command Arguments

• 0: 4
• 1: 6
• 2: 5123
• 3: 0

Stack Trace

• 0: n.draw (https://cdn.babylonjs.com/babylon.js:5:19525)
• 1: r._draw (https://cdn.babylonjs.com/babylon.js:14:8749)
• 2: r._processRendering (https://cdn.babylonjs.com/babylon.js:14:11844)
• 3: r.render (https://cdn.babylonjs.com/babylon.js:14:13741)

Blend State

• BLEND: false
• BLEND_COLOR: 0, 0, 0, 0
• BLEND_DST_ALPHA: ZERO
• BLEND_DST_RGB: ZERO
• BLEND_EQUATION_ALPHA: FUNC_ADD
• BLEND_EQUATION_RGB: FUNC_ADD
• BLEND_SRC_ALPHA: ONE
• BLEND_SRC_RGB: ONE

Color State

• COLOR_WRITEMASK: true, true, true, true

Coverage State

• SAMPLE_COVERAGE_VALUE: 1
• SAMPLE_COVERAGE_INVERT: false
• SAMPLE_COVERAGE: false
• SAMPLE_ALPHA_TO_COVERAGE: false

Cull State

• CULL_FACE: true
• CULL_FACE_MODE: BACK

Depth State

• DEPTH_TEST: true
• DEPTH_FUNC: LEQUAL
• DEPTH_RANGE: 0, 1
• DEPTH_WRITEMASK: true

Draw State

• DITHER: true
• VIEWPORT: 0, 0, 1680, 944
• FRONT_FACE: CCW
• FRAGMENT_SHADER_DERIVATIVE_HINT_OES: Extension OES_standard_derivatives is unavailble.
• RASTERIZER_DISCARD: false
• FRAGMENT_SHADER_DERIVATIVE_HINT: 4352

Polygon Offset State

• POLYGON_OFFSET_FILL: false
• POLYGON_OFFSET_FACTOR: 0
• POLYGON_OFFSET_UNITS: 0

Scissor State

• SCISSOR_TEST: false
• SCISSOR_BOX: 0, 0, 300, 150

Stencil State

• STENCIL_TEST: false
• STENCIL_BACK_FAIL: KEEP
• STENCIL_BACK_FUNC: ALWAYS
• STENCIL_BACK_PASS_DEPTH_FAIL: KEEP
• STENCIL_BACK_PASS_DEPTH_PASS: REPLACE
• STENCIL_BACK_REF: 1
• STENCIL_BACK_VALUE_MASK: 00000000000000000000000011111111
• STENCIL_BACK_WRITEMASK: 00000000000000000000000011111111
• STENCIL_FAIL: KEEP
• STENCIL_FUNC: ALWAYS
• STENCIL_PASS_DEPTH_FAIL: KEEP
• STENCIL_PASS_DEPTH_PASS: REPLACE
• STENCIL_REF: 1
• STENCIL_VALUE_MASK: 00000000000000000000000011111111
• STENCIL_WRITEMASK: 00000000000000000000000011111111

Draw Call

Program Status

• program: WebGLProgram - ID: 0
• DELETE_STATUS: false
• LINK_STATUS: true
• VALIDATE_STATUS: false
• RECOMPILABLE: true

Shaders(0)

• shader: WebGLShader - ID: 0
• COMPILE_STATUS: true
• DELETE_STATUS: true
• SHADER_TYPE: VERTEX_SHADER
• source: Click to Open.
• name: vertex:shader1523476612517

Shaders(1)

• shader: WebGLShader - ID: 1
• COMPILE_STATUS: true
• DELETE_STATUS: true
• SHADER_TYPE: FRAGMENT_SHADER
• source: Click to Open.
• name: fragment:shader1523476612517

Attributes(0)

• name: position
• size: 1
• type: FLOAT_VEC3
• location: 0
• offsetPointer: 0
• bufferBinding: WebGLBuffer - ID: 0
• enabled: true
• arraySize: 3
• stride: 12
• arrayType: FLOAT
• normalized: false
• vertexAttrib: 0, 0, 0, 1
• integer: false
• divisor: 0

Attributes(1)

• name: uv
• size: 1
• type: FLOAT_VEC2
• location: 1
• offsetPointer: 0
• bufferBinding: WebGLBuffer - ID: 1
• enabled: true
• arraySize: 2
• stride: 8
• arrayType: FLOAT
• normalized: false
• vertexAttrib: 0, 0, 0, 1
• integer: false
• divisor: 0

Uniforms(0)

• name: worldViewProjection
• size: 1
• type: FLOAT_MAT4
• location: WebGLUniformLocation - ID: 1
• value: 1.3290, 0, 0, 0, 0, 2.3652, 0, 0, 0, 0, 1.0002, 1, 0, 0, -1, 1
• blockIndice: -1
• offset: -1
• arrayStride: -1
• matrixStride: -1
• rowMajor: false

• frameBuffer: null
• uniformBlocks: Empty Array

[Pryme8]

https://playground.babylonjs.com/#0CG7R0

recreation of the problem in a playground.  The UV attribute has to be not getting bound correctly for some reason.
 

https://playground.babylonjs.com/#0CG7R0#1
Position passes fine.

https://playground.babylonjs.com/#0CG7R0#2
Its something I am doing with the shader, or the creation of it.  Not the mesh I'm getting the same results with MeshBuilder as a Custom Mesh.

[Pryme8]

Oh man, I am dumb I think I figured it out.  Its the h and v var... everything is correct we are just looking at the center of a huge mesh.

[Pryme8]

I decided to use @JCPalmer's solution instead of @jerome's for simplicity in a tutorial/article I am writing,  which was untested... alas I am going to have to explain jeromes math now.

[Guest]

hahaha good job finding it