opengl渲染矩形，如何实现opengl渲染，并用Xcomponent显示出来

build() { 
  Column() { 
    Row() { 
      Text($r('app.string.title')) 
        .fontSize($r('app.float.title_text_font_size')) 
        .fontWeight(CommonConstants.FONT_WEIGHT) 
        .margin({ left: $r('app.float.title_text_margin_left'), top: $r('app.float.title_text_margin_top') }) 
    } 
    .margin({ top: $r('app.float.title_margin_top') }) 
    .width(CommonConstants.FULL_PARENT) 
    .height($r('app.float.title_height')) 
 
    Column() { 
      XComponent({ 
        id: CommonConstants.XCOMPONENT_ID, 
        type: CommonConstants.XCOMPONENT_TYPE, 
        libraryname: CommonConstants.XCOMPONENT_LIBRARY_NAME 
      }).onLoad((xComponentContext?: object | Record<string, () => void>) => { 
        if (xComponentContext) { 
          this.xComponentContext = xComponentContext as Record<string, () => void>; 
        } 
      }) 
    } 
    .margin({ 
      top: $r('app.float.xcomponent_margin_top'), 
      left: $r('app.float.xcomponent_margin_left'), 
      right: $r('app.float.xcomponent_margin_right') 
    }) 
    .height(CommonConstants.XCOMPONENT_HEIGHT) 
 
    Row() { 
      Button($r('app.string.button_text')) 
        .fontSize($r('app.float.button_font_size')) 
        .fontWeight(CommonConstants.FONT_WEIGHT) 
        .margin({ bottom: $r('app.float.button_margin_bottom') }) 
        .onClick(() => { 
          if (this.xComponentContext) { 
            this.xComponentContext.drawRectangle(); 
          } 
        }) 
        .width(CommonConstants.BUTTON_WIDTH) 
        .height($r('app.float.button_height')) 
    } 
    .width(CommonConstants.FULL_PARENT) 
    .justifyContent(FlexAlign.Center) 
    .alignItems(VerticalAlign.Bottom) 
    .layoutWeight(CommonConstants.LAYOUT_WEIGHT) 
  }.width(CommonConstants.FULL_PARENT).height(CommonConstants.FULL_PARENT) 
}

void EGLCore::Draw() 
{ 
    m_flag = false; 
    OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "EGLCore", "Draw"); 
    GLint position = PrepareDraw(); 
    if (POSITION_ERROR == position) { 
        OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "Draw get position failed"); 
        return; 
    } 
    if (!ExecuteDraw(position, BACKGROUND_COLOR, BACKGROUND_RECTANGLE_VERTICES, 
        sizeof(BACKGROUND_RECTANGLE_VERTICES))) { 
        OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "Draw execute draw background failed"); 
        return; 
    } 
    const GLfloat rectangleVertices[] = { 
        -m_widthPercent, FIFTY_PERCENT, 
        m_widthPercent, FIFTY_PERCENT, 
        m_widthPercent, -FIFTY_PERCENT, 
        -m_widthPercent, -FIFTY_PERCENT 
    }; 
    if (!ExecuteDraw(position, DRAW_COLOR, rectangleVertices, sizeof(rectangleVertices))) { 
        OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "Draw execute draw rectangle failed"); 
        return; 
    } 
    if (!FinishDraw()) { 
        OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "Draw FinishDraw failed"); 
        return; 
    } 
    m_flag = true; 
}