iphone - How to give 3D effects to UIImageView/uiview using OpenGL looks like a 3D CUBE -
i new opengl , don't have knowledge in it. want add 3d effect uiimageview . how can achieve using opengl? want seen in image: 
i have searched , found possible using opengl. have referred this link opengl . have created cube, , got effect
gldrawelements(gl_triangles, sizeof(indices)/sizeof(indices[0]), gl_unsigned_byte, 0); but come know gldrawrangeelements can make 3d cube, not have idea how implement same.
edit
here code showing ther vertext , indices array
const vertex vertices[] = {
// front {{1, -1, 1}, {1, 0, 0, 1}, {1, 0}}, {{1, 1, 1}, {0, 1, 0, 1}, {1, 1}}, {{-1, 1, 1}, {0, 0, 1, 1}, {0, 1}}, {{-1, -1, 1}, {0, 0, 0, 1}, {0, 0}}, // {{1, 1, -1}, {1, 0, 0, 1}, {0, 1}}, {{-1, -1, -1}, {0, 1, 0, 1}, {1, 0}}, {{1, -1, -1}, {0, 0, 1, 1}, {0, 0}}, {{-1, 1, -1}, {0, 0, 0, 1}, {1, 1}}, // left {{-1, -1, 1}, {1, 0, 0, 1}, {1, 0}}, {{-1, 1, 1}, {0, 1, 0, 1}, {1, 1}}, {{-1, 1, -1}, {0, 0, 1, 1}, {0, 1}}, {{-1, -1, -1}, {0, 0, 0, 1}, {0, 0}}, // right {{1, -1, -1}, {1, 0, 0, 1}, {1, 0}}, {{1, 1, -1}, {0, 1, 0, 1}, {1, 1}}, {{1, 1, 1}, {0, 0, 1, 1}, {0, 1}}, {{1, -1, 1}, {0, 0, 0, 1}, {0, 0}}, // top {{1, 1, 1}, {1, 0, 0, 1}, {1, 0}}, {{1, 1, -1}, {0, 1, 0, 1}, {1, 1}}, {{-1, 1, -1}, {0, 0, 1, 1}, {0, 1}}, {{-1, 1, 1}, {0, 0, 0, 1}, {0, 0}}, // bottom {{1, -1, -1}, {1, 0, 0, 1}, {1, 0}}, {{1, -1, 1}, {0, 1, 0, 1}, {1, 1}}, {{-1, -1, 1}, {0, 0, 1, 1}, {0, 1}}, {{-1, -1, -1}, {0, 0, 0, 1}, {0, 0}} };
const glubyte indices[] = {
// front 0, 1, 2, 2, 3, 0, // 4, 6, 5, 4, 5, 7, // left 8, 9, 10, 10, 11, 8, // right 12, 13, 14, 14, 15, 12, // top 16, 17, 18, 18, 19, 16, // bottom 20, 21, 22, 22, 23, 20 };
so please suggest me . if possible better work core graphics , fine.
please me solution. in advance!
forget uiimage/etc. if rendering cube in 3d opengl, must texture-map using opengl texture. pretty basic stuff in opengl; there must ton of tutorials on web 1. texture mapping , 2. drawing cube.
make sure search "opengl es 1.1", "opengl es 2.0", or "glkit"
edit try this: http://www.raywenderlich.com/4404/opengl-es-2-0-for-iphone-tutorial-part-2-textures
edit 2
ok, source code. first, use vertex data format:
typedef struct ttexturecoords { glfloat s; glfloat t; }texturecoords; // 3d float vector position , normals typedef struct tvertex3d { glfloat x; glfloat y; glfloat z; }vertex3d; // 4d byte vector colors typedef struct tcolor4 { glubyte r; // [0...255] glubyte g; // [0...255] glubyte b; // [0...255] glubyte a; // [0...255] }color4; // vertex data 3d objects typedef struct tvertexdata3d { vertex3d position; vertex3d normal; texturecoords texcoords; color4 color; }vertexdata3d; next, vertex data 1 cube
static gluint vertexbuffer = 0; static gluint indexbuffer = 0; static vertexdata3d vertexarray[24] = { // ......................................................................... // < left > face (-x) { // vertex 0 { -0.5f, +0.5f, -0.5f }, // position { -1.0f, 0.0f, 0.0f }, // normal (-x) { 0.5f/512.0f, 0.5f/512.0f }, // texture { 0xff, 0xff, 0xff, 0xff} // color }, { // vertex 1 { -0.5f, -0.5f, -0.5f }, // position { -1.0f, 0.0f, 0.0f }, // normal (-x) { 0.5f/512.0f, 127.5f/512.0f }, // texture { 0xff, 0xff, 0xff, 0xff} // color }, { // vertex 2 { -0.5f, +0.5f, +0.5f }, // position { -1.0f, 0.0f, 0.0f }, // normal (-x) { 127.5f/512.0f, 0.5f/512.0f }, // texture { 0xff, 0xff, 0xff, 0xff} // color }, { // vertex 3 { -0.5f, -0.5f, +0.5f }, // position { -1.0f, 0.0f, 0.0f }, // normal (-x) { 127.5f/512.0f, 127.5f/512.0f }, // texture { 0xff, 0xff, 0xff, 0xff} // color }, // ......................................................................... // < right > face (+x) { // vertex 4 { +0.5f, +0.5f, +0.5f }, // position { +1.0f, 0.0f, 0.0f }, // normal (+x) { 128.5f/512.0f, 0.5f/512.0f }, // texture { 0xff, 0xff, 0xff, 0xff} // color }, { // vertex 5 { +0.5f, -0.5f, +0.5f }, // position { +1.0f, 0.0f, 0.0f }, // normal (+x) { 128.5f/512.0f, 127.5f/512.0f }, // texture { 0xff, 0xff, 0xff, 0xff} // color }, { // vertex 6 { +0.5f, +0.5f, -0.5f }, // position { +1.0f, 0.0f, 0.0f }, // normal (+x) { 255.5f/512.0f, 0.5f/512.0f }, // texture { 0xff, 0xff, 0xff, 0xff} // color }, { // vertex 7 { +0.5f, -0.5f, -0.5f }, // position { +1.0f, 0.0f, 0.0f }, // normal (+x) { 255.5f/512.0f, 127.5f/512.0f }, // texture { 0xff, 0xff, 0xff, 0xff} // color }, // ......................................................................... // < bottom > face (-y) { // vertex 8 { -0.5f, -0.5f, +0.5f }, // position { 0.0f, -1.0f, 0.0f }, // normal (-y) { 0.5f/512.0f, 128.5f/512.0f }, // texture { 0xff, 0xff, 0xff, 0xff} // color }, { // vertex 9 { -0.5f, -0.5f, -0.5f }, // position { 0.0f, -1.0f, 0.0f }, // normal (-y) { 0.5f/512.0f, 255.5f/512.0f }, // texture { 0xff, 0xff, 0xff, 0xff} // color }, { // vertex 10 { +0.5f, -0.5f, +0.5f }, // position { 0.0f, -1.0f, 0.0f }, // normal (-y) { 127.5f/512.0f, 128.5f/512.0f }, // texture { 0xff, 0xff, 0xff, 0xff} // color }, { // vertex 11 { +0.5f, -0.5f, -0.5f }, // position { 0.0f, -1.0f, 0.0f }, // normal (-y) { 127.5f/512.0f, 255.5f/512.0f }, // texture { 0xff, 0xff, 0xff, 0xff} // color }, // ......................................................................... // < top > face (+y) { // vertex 12 { -0.5f, +0.5f, -0.5f }, // position { 0.0f, +1.0f, 0.0f }, // normal (+y) { 128.5f/512.0f, 128.5f/512.0f }, // texture { 0xff, 0xff, 0xff, 0xff} // color }, { // vertex 13 { -0.5f, +0.5f, +0.5f }, // position { 0.0f, +1.0f, 0.0f }, // normal (+y) { 128.5f/512.0f, 255.5f/512.0f }, // texture { 0xff, 0xff, 0xff, 0xff} // color }, { // vertex 14 { +0.5f, +0.5f, -0.5f }, // position { 0.0f, +1.0f, 0.0f }, // normal (+y) { 255.5f/512.0f, 128.5f/512.0f }, // texture { 0xff, 0xff, 0xff, 0xff} // color }, { // vertex 15 { +0.5f, +0.5f, +0.5f }, // position { 0.0f, +1.0f, 0.0f }, // normal (-y) { 255.5f/512.0f, 255.5f/512.0f }, // texture { 0xff, 0xff, 0xff, 0xff} // color }, // ......................................................................... // < > face (-z) { // vertex 16 { -0.5f, -0.5f, -0.5f }, // position { 0.0f, 0.0f, -1.0f }, // normal (-z) { 127.5f/512.0f, 383.5f/512.0f }, // texture { 0xff, 0xff, 0xff, 0xff} // color }, { // vertex 17 { -0.5f, +0.5f, -0.5f }, // position { 0.0f, 0.0f, -1.0f }, // normal (-z) { 127.5f/512.0f, 256.5f/512.0f }, // texture { 0xff, 0xff, 0xff, 0xff} // color }, { // vertex 18 { +0.5f, -0.5f, -0.5f }, // position { 0.0f, 0.0f, -1.0f }, // normal (-z) { 0.5f/512.0f, 383.5f/512.0f }, // texture { 0xff, 0xff, 0xff, 0xff} // color }, { // vertex 19 { +0.5f, +0.5f, -0.5f }, // position { 0.0f, 0.0f, -1.0f }, // normal (-z) { 0.5f/512.0f, 256.5f/512.0f }, // texture { 0xff, 0xff, 0xff, 0xff} // color }, // ......................................................................... // < front > face (+z) { // vertex 20 { -0.5f, +0.5f, +0.5f }, // position { 0.0f, 0.0f, +1.0f }, // normal (+z) { 128.5f/512.0f, 256.5f/512.0f }, // texture { 0xff, 0xff, 0xff, 0xff} // color }, { // vertex 21 { -0.5f, -0.5f, +0.5f }, // position { 0.0f, 0.0f, +1.0f }, // normal (+z) { 128.5f/512.0f, 383.5f/512.0f }, // texture { 0xff, 0xff, 0xff, 0xff} // color }, { // vertex 22 { +0.5f, +0.5f, +0.5f }, // position { 0.0f, 0.0f, +1.0f }, // normal (+z) { 255.5f/512.0f, 256.5f/512.0f }, // texture { 0xff, 0xff, 0xff, 0xff} // color }, { // vertex 23 { +0.5f, -0.5f, +0.5f }, // position { 0.0f, 0.0f, +1.0f }, // normal (+z) { 255.5f/512.0f, 383.5f/512.0f }, // texture { 0xff, 0xff, 0xff, 0xff} // color } }; cube size 1x1x1. must provide 4x4 model matrix (see shader program setup below) translate/scale/rotate cube. data format c array of floats. how set up, beyond scope here , can search in internet.
texture coordinates assume using texture this: (each square face)
...and index data:
static glushort indexarray[] = { // triangle strip... 12, // ... 13, // ... 14, // top face // ccw 15, // top face // cw 22, // degenerate (14, 15, 22) // (ccw) 20, // degenarate (15, 22, 20) // (cw) 23, // front face (22, 20, 23) // ccw 21, // front face (20, 23, 21) // cw 3, // degenerate (20, 21, 3) // (ccw) 2, // degenerate (21, 3, 2) // (cw) 1, // left face ( 3, 2, 1) // ccw 0, // left face ( 2, 1, 0) // cw 16, // degenerate ( 1, 0, 16) // (ccw) 17, // degenerate ( 0, 16, 17) // (cw) 18, // face (16, 17, 18) // ccw 19, // face (17, 18, 19) // cw 6, // degenerate (18, 19, 6) // (ccw) 4, // degenerate (19, 6, 4) // (cw) 7, // right face ( 6, 4, 7) // ccw 5, // right face ( 4, 7, 5) // cw 10, // degenerate ( 7, 5, 10) // (ccw) 8, // degenerate ( 5, 10, 8) // (cw) 11, // bottom face (10, 8, 11) // ccw 9 // bottom face ( 8, 11, 9) // cw }; ('cw' denotes clockwise triangle in triangle strip. 'ccw' denotes counter-clockwise)
this how generate opengl buffers:
glgenbuffers(1, &vertexbuffer); glbindbuffer(gl_array_buffer, vertexbuffer); glbufferdata(gl_array_buffer, 24*sizeof(vertexdata3d), &vertexarray[0], gl_static_draw); glbindbuffer(gl_array_buffer, 0); glgenbuffers(1, &indexbuffer); glbindbuffer(gl_element_array_buffer, indexbuffer); glbufferdata(gl_element_array_buffer, 24*sizeof(glushort), &indexarray[0], gl_static_draw); glbindbuffer(gl_element_array_buffer, 0); these opengl parameters: (material, lighting, etc.)
static glfloat lightposition[4] = { light_x_pos, light_y_pos, light_z_pos, 1.0f }; static glfloat cubeambientmaterial[4] = { 0.30f, 0.30f, 0.30f, 1.00f }; static glfloat cubediffusematerial[4] = { 0.650f, 0.650f, 0.650f, 1.00f }; static glfloat cubespecularmaterial[4] = { 1.0f, 1.0f, 1.0f, 1.0f}; static glfloat cubeshininess = 1500.0f; //lighting calculated in model coordinates: //eye , light source located high along z axis static glfloat eyeposition[3] = { 0.0f, 0.0f, camera_z_pos }; and draw call:
// vbo offsets static glsizei stride = (glsizei)(sizeof(vertexdata3d)); static glvoid* positionoffset = (glvoid*)(0); static glvoid* normaloffset = (glvoid*)(sizeof(vertex3d)); static glvoid* textureoffset = (glvoid*)(2*sizeof(vertex3d)); glbindbuffer(gl_element_array_buffer, indexbuffer); glbindbuffer(gl_array_buffer, vertexbuffer); glbindtexture(gl_texture_2d, yourtextureid); // bind texture gluseprogram(yourprogram); // setup program (shaders) gluniformmatrix4fv(viewlocationinprogram, 1, 0, viewmatrix); // upload 4x4 view matrix gluniform3fv(lightpositionlocationinprogram, 1, lightposition ); gluniform3fv(eyepositionlocationinprogram, 1, eyeposition ); gluniform3fv(ambientmateriallocationinprogram, 1, cubeambientmaterial ); gluniform3fv(specularmateriallocationinprogram, 1, cubespecularmaterial); gluniform3fv(diffusemateriallocationinprogram, 1, cubediffusematerial ); gluniform1f(shininesslocationinprogram, cubeshininess ); glvertexattribpointer(positionlocationinprogram, 3, gl_float, gl_false, stride, positionoffset); glvertexattribpointer(normallocationinprogram, 3, gl_float, gl_false, stride, normaloffset); glvertexattribpointer(texcoordlocationinprogram, 2, gl_float, gl_false, stride, textureoffset); glenablevertexattribarray(positionlocationinprogram); glenablevertexattribarray(normallocationinprogram); glenablevertexattribarray(texcoordlocationinprogram); gluniformmatrix4fv(modellocationinprogram, 1, 0, modelmatrix); gluniformmatrix3fv(normalmatrixlocationinprogram, 1, 0, normalmatrix); gldrawelements(gl_triangle_strip, 48, gl_unsigned_short, 0); gldrawelements(gl_triangle_strip, 48, gl_unsigned_short, 0); gldisablevertexattribarray(positionlocationinprogram); gldisablevertexattribarray(normallocationinprogram); gldisablevertexattribarray(texcoordlocationinprogram); you handles each attribute/unifoerm in shader once on setup, code:
positionlocationinprogram = glgetattriblocation(yourprogram, "position"); normallocationinprogram = glgetattriblocation(yourprogram, "normal"); texcoordlocationinprogram = glgetattriblocation(yourprogram, "texturecoord"); modellocation = glgetuniformlocation(yourprogram, "model"); viewlocationinprogram = glgetuniformlocation(yourprogram, "view"); normalmatrixlocationinprogram = glgetuniformlocation(yourprogram, "normalmatrix"); lightpositionlocationinprogram = glgetuniformlocation(yourprogram, "lightposition"); eyepositionlocationinprogram = glgetuniformlocation(yourprogram, "eyeposition"); ambientmateriallocationinprogram = glgetuniformlocation(yourprogram, "ambientmaterial"); diffusemateriallocationinprogram = glgetuniformlocation(yourprogram, "diffusematerial"); specularmateriallocationinprogram = glgetuniformlocation(yourprogram, "specularmaterial"); shininesslocationinprogram = glgetuniformlocation(yourprogram, "shininess"); samplerlocationinprogram = glgetuniformlocation(yourprogram, "sampler"); gluseprogram(yourprogram); gluniform1i(samplerlocationinprogram, 0); (all variables end in 'inprogram' glints);
and finally, vertex shader:
// these change per-vertex attribute vec4 position; attribute vec3 normal; attribute vec2 texturecoord; // these change once in while (e.g., per object) uniform mat4 projection; uniform mat4 model; uniform mat4 view; uniform mat3 normalmatrix; uniform vec3 lightposition; uniform vec3 eyeposition; uniform vec3 diffusematerial; uniform vec3 ambientmaterial; uniform vec3 specularmaterial; uniform float shininess; // thes go fragment shader (output) varying vec4 destinationcolor; varying vec2 texturecoordout; void main (void) { vec4 p = ( projection * view * model ) * position; // position in model coordinates vec3 p2 = vec3( model * position ); vec3 n = normalize(normalmatrix*normal); vec3 l = normalize(lightposition - p2); vec3 e = normalize(eyeposition - p2); vec3 h = normalize(l + e); float df = max(0.0, dot(n, l)); float sf = max(0.0, dot(n, h)); sf = pow(sf, shininess); vec3 color = ambientmaterial + (df * diffusematerial) + (sf * specularmaterial); destinationcolor = vec4(color, 1); texturecoordout = texturecoord; gl_position = p; } ...and fragment shader:
varying lowp vec4 destinationcolor; varying mediump vec2 texturecoordout; uniform sampler2d sampler; void main (void) { gl_fragcolor = (texture2d(sampler, texturecoordout ) * destinationcolor); } please note there lots of possible intricacies here, opengl not trivial subject, code may not work is, believe it's starting point want achieve. recommend learn stuff, because there ton of little things can go wrong if copy/paste else's code.
Comments
Post a Comment