12

OpenGL ES 2.0 (iOS) で描画されたオブジェクトを選択する最良の方法は何ですか?

ポイントを描いています。

4

2 に答える 2

23

これは、ほとんどの古い iPad でテストされ、うまく機能するカラー ピッキングのプロトタイプです。これは実際には、アプリストアで見つけることができる InCube Chess と呼ばれるプロジェクトの一部です。表示されるメイン コードは、次のように GLKViewController から派生したクラスにあります。

@interface IncubeViewController : GLKViewController

これは、glkview があることを意味します: ((GLKView *)self.view)。

ここにもいくつかのプロパティがあります:

@property (strong, nonatomic) EAGLContext *context;
@property (strong, nonatomic) GLKBaseEffect *effect;

*.m ファイルでそれらを合成することを忘れないでください。

@synthesize context = _context;
@synthesize effect = _effect;

アイデアは、テーブル (または 3D シーン内のいくつかのオブジェクト) にチェスの駒があり、画面をタップして駒のリストから駒を見つける必要があるということです。つまり、2D 画面のタップ座標 (この場合は @point) をチェスの駒のインスタンスに変換する必要があります。

各ピースには、私が「シール」と呼ぶ一意の ID があります。シールは1枚から何枚まででも割り振ることができます。選択関数は、タップ座標で見つかったピース シールを返します。次に、シールを使用すると、次のような方法で、断片化されたハッシュ テーブルまたは配列を簡単に見つけることができます。

-(Piece *)findPieceBySeal:(GLuint)seal
{
        /* !!! Black background in off screen buffer produces 0 seals. This allows
           to quickly filter out taps that did not select anything (will be
           mentioned below) !!! */
        if (seal == 0)
                return nil;
        PieceSeal *sealKey = [[PieceSeal alloc] init:s];
        Piece *p = [sealhash objectForKey:sealKey];
        [sealKey release];
        return p;
}

「sealhash」は NSMutableDictionary です。

これがメインの選択機能です。私のglkviewはアンチエイリアスされており、そのバッファを色の選択に使用できないことに注意してください。これは、アンチエイリアシングを無効にした独自のオフスクリーン バッファを、ピッキング目的でのみ作成する必要があることを意味します。

- (NSUInteger)findSealByPoint:(CGPoint)point
{
        NSInteger height = ((GLKView *)self.view).drawableHeight;
        NSInteger width = ((GLKView *)self.view).drawableWidth;
        Byte pixelColor[4] = {0,};
        GLuint colorRenderbuffer;
        GLuint framebuffer;

        glGenFramebuffers(1, &framebuffer);
        glBindFramebuffer(GL_FRAMEBUFFER, framebuffer);
        glGenRenderbuffers(1, &colorRenderbuffer);
        glBindRenderbuffer(GL_RENDERBUFFER, colorRenderbuffer);

        glRenderbufferStorage(GL_RENDERBUFFER, GL_RGBA8_OES, width, height);
        glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0_OES, GL_RENDERBUFFER, colorRenderbuffer);

        GLenum status = glCheckFramebufferStatus(GL_FRAMEBUFFER);
        if (status != GL_FRAMEBUFFER_COMPLETE) {
                NSLog(@"Framebuffer status: %x", (int)status);
                return 0;
        }

        [self render:DM_SELECT];

        CGFloat scale = UIScreen.mainScreen.scale;
        glReadPixels(point.x * scale, (height - (point.y * scale)), 1, 1, GL_RGBA, GL_UNSIGNED_BYTE, pixelColor);

        glDeleteRenderbuffers(1, &colorRenderbuffer);
        glDeleteFramebuffers(1, &framebuffer);

        return pixelColor[0];
}

関数は表示スケール (Retina または新しい iPad) を考慮していることに注意してください。

上記の関数で使用される render() 関数は次のとおりです。レンダリングの目的では、背景色でバッファをクリアし、ケースを選択する場合は黒にすることに注意してください。これにより、ピースをタップしたかどうかを簡単に確認できます。

- (void) render:(DrawMode)mode
{
        if (mode == DM_RENDER)
                glClearColor(backgroundColor.r, backgroundColor.g,
                             backgroundColor.b, 1.0f);
        else
                glClearColor(0.0f, 0.0f, 0.0f, 1.0f);

        glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

        /* Draw all pieces. */
        for (int i = 0; i < [model->pieces count]; i++) {
                Piece *p = [model->pieces objectAtIndex:i];
                [self drawPiece:p mode:mode];
        }
}

次に作品の描き方です。

- (void) drawPiece:(Piece *)p mode:(DrawMode)mode
{
        PieceType type;

        [self pushMatrix];

        GLKMatrix4 modelViewMatrix = self.effect.transform.modelviewMatrix;

        GLKMatrix4 translateMatrix = GLKMatrix4MakeTranslation(p->drawPos.X,
                                                               p->drawPos.Y,
                                                               p->drawPos.Z);
        modelViewMatrix = GLKMatrix4Multiply(modelViewMatrix, translateMatrix);

        GLKMatrix4 rotateMatrix;
        GLKMatrix4 scaleMatrix;

        if (mode == DM_RENDER) {
                scaleMatrix = GLKMatrix4MakeScale(p->scale.X,
                                                  p->scale.Y, p->scale.Z);
        } else {
                /* !!! Make the piece a bit bigger in off screen buffer for selection
                   purposes so that we always sure that we tapped it correctly by
                   finger.*/
                scaleMatrix = GLKMatrix4MakeScale(p->scale.X + 0.2,
                                                  p->scale.Y + 0.2, p->scale.Z + 0.2);
        }

        modelViewMatrix = GLKMatrix4Multiply(modelViewMatrix, scaleMatrix);

        self.effect.transform.modelviewMatrix = modelViewMatrix;

        type = p->type;

        if (mode == DM_RENDER) {
                /* !!! Use real pieces color and light on for normal drawing !!! */
                GLKVector4 color[pcLast] = {
                        [pcWhite] = whitesColor,
                        [pcBlack] = blacksColor
                };
                self.effect.constantColor = color[p->color];
                self.effect.light0.enabled = GL_TRUE;
        } else {
                /* !!! Use piece seal for color. Important to turn light off !!! */
                self.effect.light0.enabled = GL_FALSE;
                self.effect.constantColor = GLKVector4Make(p->seal / 255.0f,
                                                           0.0f, 0.0f, 0.0f);
        }

        /* Actually normal render the piece using it geometry buffers. */
        [self renderPiece:type];

        [self popMatrix];
}

上記の機能の使い方です。

- (IBAction) tapGesture:(id)sender
{
        if ([(UITapGestureRecognizer *)sender state] == UIGestureRecognizerStateEnded) {
                CGPoint tap = [(UITapGestureRecognizer *)sender locationInView:self.view];
                Piece *p = [self findPieceBySeal:[self findSealByPoint:tap]];

                /* !!! Do something with your selected object !!! */
        }
}

基本的にはこれです。レイ トレーシングなどよりもはるかに優れた、非常に正確なピッキング アルゴリズムが得られます。

ここでは、プッシュ/ポップ マトリックスのヘルパーを示します。

- (void)pushMatrix
{
        assert(matrixSP < sizeof(matrixStack) / sizeof(GLKMatrix4));
        matrixStack[matrixSP++] = self.effect.transform.modelviewMatrix;
}

- (void)popMatrix
{
        assert(matrixSP > 0);
        self.effect.transform.modelviewMatrix = matrixStack[--matrixSP];
}

ここでは、私が使用した glkview のセットアップ/クリーンアップ関数も示します。

- (void)viewDidLoad
{
        [super viewDidLoad];
        self.context = [[[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2] autorelease];
        if (!self.context)
                NSLog(@"Failed to create ES context");

        GLKView *view = (GLKView *)self.view;
        view.context = self.context;
        view.drawableDepthFormat = GLKViewDrawableDepthFormat24;

        [self setupGL];
}

- (void)viewDidUnload
{    
        [super viewDidUnload];

        [self tearDownGL];

        if ([EAGLContext currentContext] == self.context)
                [EAGLContext setCurrentContext:nil];
        self.context = nil;
}

- (void)setupGL
{
        [EAGLContext setCurrentContext:self.context];

        self.effect = [[[GLKBaseEffect alloc] init] autorelease];
        if (self.effect) {
                self.effect.useConstantColor = GL_TRUE;
                self.effect.colorMaterialEnabled = GL_TRUE;
                self.effect.light0.enabled = GL_TRUE;
                self.effect.light0.diffuseColor = GLKVector4Make(1.0f, 1.0f, 1.0f, 1.0f);
        }

        /* !!! Draw antialiased geometry !!! */
        ((GLKView *)self.view).drawableMultisample = GLKViewDrawableMultisample4X;
        self.pauseOnWillResignActive = YES;
        self.resumeOnDidBecomeActive = YES;
        self.preferredFramesPerSecond = 30;

        glDisable(GL_DITHER);
        glEnable(GL_CULL_FACE);
        glEnable(GL_DEPTH_TEST);
        glLineWidth(2.0f);

        /* Load pieces geometry */
        [self loadGeometry];
}

- (void)tearDownGL
{
        drawReady = NO;
        [EAGLContext setCurrentContext:self.context];
        [self unloadGeometry];
}

これが役に立ち、「ピッキングの質問」を永遠に閉じることができることを願っています:)

于 2012-05-28T11:47:56.010 に答える
5

上記のソリューションに基づいて、3Dピッキング用の深度バッファーとシールを取得するためのGLKVector3署名を使用して行う方法は次のとおりです。

  • 私のすべてのオブジェクトはシールを取得しました
  • colorという名前のGLKVector3を使用して、読み取ったピクセルからシールを取得します。このソリューションを使用すると、255 * 255 * 255=16,581,375オブジェクトを格納できます。

シェーダー内(必要に応じて頂点またはフラグメント)

ピックパスを実行するかどうかを示すピッキングブール値を追加します

uniform bool picking;

およびGLKVector3

uniform vec3 color;

ブールピッキングがアクティブになっている場合、色はGLKVector3になります

if(picking)
{
    colorVarying = vec4(color, 1.0);
}

ViewControllerで

シールからGLKVector3を作成するメソッド(新しい3Dオブジェクトを作成する場合):

-(GLKVector3)pack:(uint)seal
{
    GLKVector3 hash;

    float r = seal % 255;
    float g = (seal / 255) % 255;
    float b = (seal / (255 * 255)) % 255;
    hash = GLKVector3Make(r/255, g/255, b/255);

    return hash;
}

そして、タッチ位置からピクセルを取得し、選択した色から選択したシールを取得するビューコントローラコード:

-(uint)getSealByColor:(GLKVector3)color
{
    color = GLKVector3DivideScalar(color, 255);
    for (MyObject *o in _objects) {
        if(GLKVector3AllEqualToVector3(o.color, color))
        {
            return o.seal;
        }
    }
    return 0;
}

-(void)tap:(UITapGestureRecognizer*)recognizer
{
    CGPoint p = [recognizer locationInView:self.view];
    GLKVector3 i = [self pickingAt:p];
    _sealSelected = [self getSealByColor:i];
}

-(GLKVector3)pickingAt:(CGPoint)position
{
    CGFloat scale = [UIScreen mainScreen].scale;

    GLsizei w = self.view.bounds.size.width * scale;
    GLsizei h = self.view.bounds.size.height * scale;

    GLuint fb;
    GLuint rb;
    GLuint db;

    Byte pixelColor[4] = {0,};

    glGenFramebuffers(1, &fb);
    glBindFramebuffer(GL_FRAMEBUFFER, fb);
    glGenRenderbuffers(1, &rb);
    glBindRenderbuffer(GL_RENDERBUFFER, rb);

    glRenderbufferStorage(GL_RENDERBUFFER, GL_RGBA8_OES, w, h);
    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, rb);

    //here we also create a depth buffer for 3D objects picking
    glGenRenderbuffers(1, &db);
    glBindRenderbuffer(GL_RENDERBUFFER, db);

    glRenderbufferStorage(GL_RENDERBUFFER, GL_DEPTH_COMPONENT16, w, h);
    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_DEPTH_ATTACHMENT, GL_RENDERBUFFER, db);

    GLenum status = glCheckFramebufferStatus(GL_FRAMEBUFFER);
    if (status != GL_FRAMEBUFFER_COMPLETE) {
        NSLog(@"Framebuffer status: %x", (int)status);
        return GLKVector3Make(0.0, 0.0, 0.0);
    }

    //we render the scene with our picking boolean activated
    [self render:YES];

    glReadPixels(position.x * scale, (h - (position.y * scale)), 1, 1, GL_RGBA, GL_UNSIGNED_BYTE, pixelColor);

    glDeleteRenderbuffers(1, &db);
    glDeleteRenderbuffers(1, &rb);
    glDeleteFramebuffers(1, &fb);

    return GLKVector3Make(pixelColor[0], pixelColor[1], pixelColor[2]);
}

これが誰かに役立つことを願っています、これは私が255以上のオブジェクトのカラーピッキングを許可する方法です。

于 2013-01-24T16:38:14.063 に答える