2012年7月23日 星期一

javascript用createElement產生button


var body = $('body') ;
var bt = document.createElement('input');
bt.id = "setTagBt";
bt.value = "Set Tag";
bt.type = "button";
bt.onclick = function(){handleSetTag();}
//比較奇怪的就是在上面這一行，如果已經寫好一個function，卻不能直接
//bt.onclick=handleSetTag();，反而一定要另外再新增一個function，否則就
//會直接執行你所指定的那個函式，不知道有沒有人知道為什麼?
body.appendChild(bt);

另外onclick也有
document.addEventListener( 'mousedown', setTag, false );
這種寫法
張貼者： 於 沒有留言:

2012年7月22日 星期日

html5圖片預覽


<body id="body" onload="">
        <input id="fileInput" type="file" multiple onchange="handleFiles(this.files)">
        <br />
        <img id="bd" style="position:absolute; top:20px; left:0px;"></img>
    </body>
    <script type="text/javascript">
    /*<![CDATA[*/
        function $(id){
            return document.getElementById(id);
        }
        function displayImage(container,dataURL){
            container.src = dataURL;
        }
        function handleFiles(files){
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                var imageType = /image.*/;
               
                if (!file.type.match(imageType)) {
                  continue;
                }

                var reader = new FileReader();
                reader.onload = function(e){
                    displayImage($('bd'),e.target.result);
                }
                reader.readAsDataURL(file);
            }
            var body = $('body') ;
            var input = $('fileInput');
            body.removeChild(input);
        }
    //]]>
    </script>
張貼者： 於 沒有留言:

2012年7月18日 星期三

opengles with iphone using color coding for picking object

正常來說在opengl是需要有兩的frame buffer
然後把color的資訊放在back buffer，不要swap過去，
如此user就不會看到。

但是在iphone上使用glkview我卻一直做不出來
原本想要用
http://mickyd.wordpress.com/2012/05/20/creating-render-to-texture-secondary-framebuffer-objects-on-ios-using-opengl-es-2/

glGenFramebuffers
glBindFramebuffer



來達成效果，但是卻始終不成功。

之後便改用
http://stackoverflow.com/questions/7861316/ios-5-glkview-how-to-access-pixel-rgb-data-for-colour-based-vertex-picking

只是我在draw in rect多加一個flag，只有在要snapshot的時候，才畫出color，
結果終於成功......


有用的參考資料：
http://stackoverflow.com/questions/9746602/getting-default-frame-buffer-id-from-glkview-glkit
http://stackoverflow.com/questions/6774197/opengl-es-2-0-object-picking-on-ios
http://stackoverflow.com/questions/7861316/ios-5-glkview-how-to-access-pixel-rgb-data-for-colour-based-vertex-picking
http://mickyd.wordpress.com/2012/05/20/creating-render-to-texture-secondary-framebuffer-objects-on-ios-using-opengl-es-2/
http://developer.apple.com/library/ios/#documentation/GLkit/Reference/GLKView_ClassReference/Reference/Reference.html
http://stackoverflow.com/questions/10958081/ios-render-to-and-read-from-depthbuffer-for-offscreen-processing
張貼者： 於 2 則留言:
標籤：

glDepthFunc


from:
http://blog.csdn.net/shuaihj/article/details/7230780

OpenGL函数思考-glDepthFunc

函数原型:

       void glDepthFunc(GLenum func)

参数说明：

      func:指定“目标像素与当前像素在z方向上值大小比较”的函数，符合该函数关系的目标像素才进行绘制，否则对目标像素不予绘制。可取以下值:

      GL_NEVER：永不绘制
      GL_LESS：如果目标像素z值<当前像素z值，则绘制目标像素
      GL_EQUAL：如果目标像素z值＝当前像素z值，则绘制目标像素
      GL_LEQUAL：如果目标像素z值<＝当前像素z值，则绘制目标像素
      GL_GREATER ：如果目标像素z值>当前像素z值，则绘制目标像素
      GL_NOTEQUAL：如果目标像素z值<>当前像素z值，则绘制目标像素
      GL_GEQUAL：如果目标像素z值>=当前像素z值，则绘制目标像素\
      GL_ALWAYS：总是绘制
函数说明：

       通过目标像素与当前像素在z方向上值大小的比较是否满足参数指定的条件，来决定在深度（z方向）上是否绘制该目标像素。该函数只有启用“深度测试”时才有效，参考glEnable(GL_DEPTH_TEST)和glDisable(GL_DEPTH_TEST)
張貼者： 於 沒有留言:
標籤：

2012年7月17日 星期二

Picking Tutorial

from：http://www.lighthouse3d.com/opengl/picking/index.php?color1


Color Coding


The Red Book describes an interesting approach to picking based on color coding. This is a very simple approach that can be used instead of using the OpenGL API described in the previous sections.
The color coding scheme does not require any perspective changes and therefore it is simpler in theory. Just define a rendering function where the relevant objects (pickable and occluders) are assigned each a different color. When the user clicks the mouse over the scene, render the scene on the back buffer, read back the selected pixel from the back buffer and check its color. The process is completely transparent to the user because the buffers are not swapped, so the color coding rendering is never seen.
For instance, consider the following scene with 4 snowmen. What you're seeing is the result of the normal rendering function.

The next figure shows the result produced in the back buffer by the color coding rendering function. As you can see each snowman has a different color.

The required steps when the mouse is clicked are:
  • 1. Call the color coding rendering function
  • 2. Read the pixel where the mouse was clicked from the back buffer
  • 3. Process the color information to find out which item was clicked
  • 4. Do NOT swap buffers, otherwise the user will see the color coding
    • Bellow the normal rendering function is presented. It contains the code to render both the ground as well as the snowmen (contained in thedisplay list). 

        
void draw() {

// Draw ground
	glColor3f(0.9f, 0.9f, 0.9f);
	glBegin(GL_QUADS);
		glVertex3f(-100.0f, 0.0f, -100.0f);
		glVertex3f(-100.0f, 0.0f,  100.0f);
		glVertex3f( 100.0f, 0.0f,  100.0f);
		glVertex3f( 100.0f, 0.0f, -100.0f);
	glEnd();

// Draw 4 Snowmen

	glColor3f(1.0f, 1.0f, 1.0f);

	for(int i = 0; i < 2; i++)
		for(int j = 0; j < 2; j++) {
			glPushMatrix();
			glTranslatef(i*3.0,0,-j * 3.0);
			glColor3f(1.0f, 1.0f, 1.0f);
			glCallList(snowman_display_list);
			glPopMatrix();
		}

}

    The following function is for color coding rendering. As you can see the ground was left out since it is neither a pickable object, nor an occluding one. Also the code for the snowmen was altered 

        
void drawPickingMode() {

// Draw 4 SnowMen


	glDisable(GL_DITHER);
	for(int i = 0; i < 2; i++)
           for(int j = 0; j < 2; j++) {
	 	glPushMatrix();
		
// A different color for each snowman

		switch (i*2+j) {	
			case 0: glColor3ub(255,0,0);break;
			case 1: glColor3ub(0,255,0);break;
			case 2: glColor3ub(0,0,255);break;
			case 3: glColor3ub(250,0,250);break;
		}

		glTranslatef(i*3.0,0,-j * 3.0);
		glCallList(snowman_display_list);
		glPopMatrix();
	   }
	glEnable(GL_DITHER);
}

    




    Cheking the Color
    
Checking the color of the pixel where the mouse was clicked involves reading that same pixel from the back buffer. This can be accomplished using the following function: 




    

void glReadPixels(GLint x, GLint y, GLsizei width, GLsizei height, GLenum format, GLenum type, GLvoid *pixels); 



Parameters:

    x,y : the bottom left corner
    width, length: the size of the area to be read
    format: The type of data to be read. In here it is assumed to GL_RGB.
    type: the data type of the elements of the pixel. In here we'll use GL_UNSIGNED_BYTE.
    pixels: An array where the pixels will be stored. This is the result of the function
    

    



Both format and type have a lot of other possibilities, check the Red or Blue books for more information.


    

    
Just as when using the OpenGL API it is necessary to invert the y coordinate. Reading the viewport information is therefore also required when using this approach. After getting the viewport info, it is possible to call glReadPixels as shown in the code bellow. The x and y parameters represent the cursor position. Width and height are both set to one since only a single pixel is being read. Afterwards it is just a matter of checking the values of the pixel. 




    


        
void processPick ()
{
	GLint viewport[4];
	GLubyte pixel[3];

	glGetIntegerv(GL_VIEWPORT,viewport);

	glReadPixels(cursorX,viewport[3]-cursorY,1,1,
		GL_RGB,GL_UNSIGNED_BYTE,(void *)pixel);

	printf("%d %d %d\n",pixel[0],pixel[1],pixel[2]);
	if (pixel[0] == 255)
	  printf ("You picked the 1st snowman on the 1st row");
	else if (pixel[1] == 255)
	  printf ("You picked the 1st snowman on the 2nd row");
	else if (pixel[2] == 255)
	  printf ("You picked the 2nd snowman on the 1st row");
	else if (pixel[0] == 250)
	  printf ("You picked the 2nd snowman on the 2nd row");
   	else
	   printf("You didn't click a snowman!");
  printf ("\n");
   
}


    

    



To get this approach running without problems there are a few things that you should be aware. First set your colors using unsigned bytes as opposed to floats. When in RGB mode there are only 256 possible values for each component, so when you set a color using floats OpenGL will pick the nearest color possible. Secondly make sure your monitor is set to True Color. Otherwise the color presented on screen is only an approximation to the required color and therefore when reading back the pixels there is a possibility that the values wont match with the set values. Finally make sure you disable dithering, lighting and texturing for the color coded rendering function, since any of these operations may change the original color.


    

    
If you really want to work with floats to set the color, or you can't guarantee that the monitor will be set to True Color then you can always to a test to check what the specified colors will look like when rendered.


    

    
This approach requires that before your application starts you must render blocks of the requested colors and read them back using glReadPixelsto get the real rendered colors. Store those colors in an array and use them instead of the colors you specified when rendering.


    

    
Be careful when choosing the colors though. If the values for each component are not set sufficiently apart then the may turn out to be the same color when rendered. For instance when setting the red component to 250, using unsigned bytes, with the monitor set to High Color instead of True Color, you actually get a red component of 255. This is because there are less possible values for each component when using only 16 bits to specify a color instead of 32 or 24. Check out the pixel packing values in the Red Book to find out about the possible combinations of bits for each component with 16 bits.
    張貼者： 於 沒有留言:
    標籤：

    2012年7月7日 星期六

    opengl(3)


    GL_REPLACE（使用测试条件中的设定值来代替当前模板值），
    GL_INCR（增加1，但如果已经是最大值，则保持不变），
    GL_INCR_WRAP（增加1，但如果已经是最大值，则从零重新开始），
    GL_DECR（减少1，但如果已经是零，则保持不变），
    GL_DECR_WRAP（减少1，但如果已经是零，则重新设置为最大值），
    GL_INVERT（按位取反）。



    // All drawing commands fail the stencil test, and are not
    // drawn, but increment the value in the stencil buffer. 
    //這個例子中，在畫的時候才會去比較stencil buffer，才會增加
    glStencilFunc(GL_NEVER, 0x0, 0x0);
    glStencilOp(GL_INCR, GL_INCR, GL_INCR);


    // Spiral pattern will create stencil pattern 
    // Draw the spiral pattern with white lines. We 
    // make the lines white to demonstrate that the
    // stencil function prevents them from being drawn
    glColor3f(1.0f, 1.0f, 1.0f); 
    glBegin(GL_LINE_STRIP);
    for(dAngle = 0; dAngle < 400.0; dAngle += 0.1){
    glVertex2d(dRadius * cos(dAngle), dRadius * sin(dAngle)); 
    //畫的時候比較stencil buffer，依上面所設always fail加一，所以最後變成所有畫線的部份是一
    dRadius *= 1.002;
    }
    glEnd();





    張貼者： 於 沒有留言:
    標籤：

    2012年7月4日 星期三

    opengl(2)

    glRotatef(要旋轉幾度, x, y, z) -> x,y,z代表一個要選轉方向的向量，因此[0,1,1]&[0,2,2]是一樣的。
    張貼者： 於 沒有留言:
    標籤：

    2012年7月3日 星期二

    opengl(1)


    Opengl Type:


    Opengl Function:

    張貼者： 於 沒有留言:
    標籤：
    訂閱： 意見 (Atom)