# MyXComponent

**Repository Path**: rdopensource/MyXComponent

## Basic Information

- **Project Name**: MyXComponent
- **Description**: 基于XComponent组件调用Native API来创建EGL/GLES环境，从而使用标准OpenGL ES进行图形渲染。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-06-06
- **Last Updated**: 2024-01-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MyXComponent

#### 介绍
基于XComponent组件调用Native API来创建EGL/GLES环境，从而使用标准OpenGL ES进行图形渲染。本项目实现了两个示例：1.使用OpenGL实现2D的图形绘制和动画，2.使用OpenGL实现了在主页面绘制一个立方体，可以在当前场景中移动，并实现了光照效果

#### 效果展示

|3D效果1| 3D效果2                                       | 2D效果1                                   | 2D效果2                                 |
|--------------------------------|--------------------------------------------|----------------------------------------|--------------------------------------|
|![](image/drawTransform1.jpg) | ![](image/drawTransform2.jpg) | ![](image/drawCube1.jpg) | ![](image/drawCube2.jpg) |

#### 视频效果展示
![](image/demo.mp4)

软件架构说明


#### 使用说明

在主页面，默认展示的是2D图形绘制效果，通过点击tab可以切换到第二个3D绘制效果

#### 工程目录
```
entry/src/main/ets/
|---entryability
|	|	|---EntryAbility.ts
|---pages
|	|---Index.ets				//首页
entry/src/main/cpp/
|---common
|	|---plugin_common.h			//日志打印封装
|---glm
|	|---*						//glm库
|---napi
|	|---napi_init.cpp			//napi函数注册入口
|---render
|	|---egl_core.cpp			//3D绘制核心类，实现了具体的绘制方法
|	|---egl_core.h				//3D绘制核心类头文件
|	|---plugin_render.cpp		//实现XComponent的生命周期函数，注册napi绘制接口，负责了一个EGLCore
|	|---plugin_render.h			//头文件
|	|---shader.h				//封装了使用shader绘制功能的类
|	|---stb_image.h				//封装了纹理加载的类
|---CMakeLists.txt				//编译脚本文件
|---plugin_manager.cpp			//负责管理注册进来的多个XComponent控件
|---plugin_manager.h			//头文件
```

#### 具体实现

在主页面设置了两个XComponent控件，通过不同的id来区分绘制不同的图形。
在XComponent初始化完成时，OnSurfaceCreated回调里面，会自动开始图形绘制。源码参考plugin_render.cpp。
在egl_core.cpp里面GLContextInit方法会创建EglWindow和EGLSurface，然后创建上下文EGLContext。根据传递进来的XComponent的id。源码参考egl_core.cpp

---绘制2D图形：egl_core.cpp里面的DrawTransform方法。主要是绘制两个图形，一个进行旋转，一个进行缩放
---绘制3D物体：egl_core.cpp里面的DrawCube方法。绘制了两个立方体，一个在屏幕中间，另一个会围绕中间的物体进行圆周运动。并且设置运动的物体为发光源，在中间物体展示不同角度的光照效果。


#### 相关权限
不涉及


#### 依赖
不涉及


#### 约束与限制
本示例仅支持标准系统上运行，支持设备：RK3568;
本示例已适配API version 9版本SDK，版本号：3.2.10.6
本示例需要使用DevEco Studio 3.1 Beta2 (Build Version: 3.1.0.400, built on April 7, 2023)及以上版本才可编译运行；


#### 下载

如需单独下载本工程，执行如下命令：
```
git init
git config core.sparsecheckout true
echo code/BasicFeature/XComponentStage/XComponentStage/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master
```