HarmonyOS鸿蒙Next中使用opengles渲染到XComponent，请提供代码示例

HarmonyOS鸿蒙Next中使用opengles渲染到XComponent，请提供代码示例 使用opengles渲染到XComponent，请提供代码示例

3 回复

可以参考下面文档： https://gitee.com/openharmony/docs/blob/master/zh-cn/third-party-cases/how-to-use-opengl-to-draw-3d-graphics.md

注意：1、要确认一下是否正确链接了OpenGL ES的动态库： https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-xcomponent-V5#xcomponent12

2、do_dlsym 打印报错为日志等级问题，可以直接忽略，这个报错不影响so加载，加载报错会直接crash

更多关于HarmonyOS鸿蒙Next中使用opengles渲染到XComponent，请提供代码示例的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，使用OpenGL ES渲染到XComponent可以通过以下代码示例实现。首先，确保你已经配置了OpenGL ES环境，并且已经创建了XComponent。

import { XComponent, XComponentController, XComponentSurface } from '@ohos.xcomponent';
import { GLES30 } from '@ohos.opengles';

class MyGLRenderer implements XComponentSurface.Callback {
    private eglDisplay: EGLDisplay;
    private eglContext: EGLContext;
    private eglSurface: EGLSurface;

    constructor(private xComponent: XComponent) {
        this.eglDisplay = EGL14.eglGetDisplay(EGL14.EGL_DEFAULT_DISPLAY);
        EGL14.eglInitialize(this.eglDisplay, null, 0);

        const attribList = [
            EGL14.EGL_RED_SIZE, 8,
            EGL14.EGL_GREEN_SIZE, 8,
            EGL14.EGL_BLUE_SIZE, 8,
            EGL14.EGL_ALPHA_SIZE, 8,
            EGL14.EGL_DEPTH_SIZE, 16,
            EGL14.EGL_STENCIL_SIZE, 0,
            EGL14.EGL_NONE
        ];

        const configs = new EGLConfig[1];
        const numConfigs = new int[1];
        EGL14.eglChooseConfig(this.eglDisplay, attribList, 0, configs, 0, configs.length, numConfigs, 0);

        const contextAttribs = [
            EGL14.EGL_CONTEXT_CLIENT_VERSION, 3,
            EGL14.EGL_NONE
        ];

        this.eglContext = EGL14.eglCreateContext(this.eglDisplay, configs[0], EGL14.EGL_NO_CONTEXT, contextAttribs, 0);

        this.eglSurface = EGL14.eglCreateWindowSurface(this.eglDisplay, configs[0], this.xComponent.getNativeWindow(), null, 0);
        EGL14.eglMakeCurrent(this.eglDisplay, this.eglSurface, this.eglSurface, this.eglContext);
    }

    onSurfaceCreated(): void {
        // OpenGL ES初始化代码
        GLES30.glClearColor(0.0, 0.0, 0.0, 1.0);
    }

    onSurfaceChanged(width: number, height: number): void {
        GLES30.glViewport(0, 0, width, height);
    }

    onDrawFrame(): void {
        GLES30.glClear(GLES30.GL_COLOR_BUFFER_BIT);
        // 渲染代码
        EGL14.eglSwapBuffers(this.eglDisplay, this.eglSurface);
    }
}

const xComponentController = new XComponentController();
const xComponent = new XComponent(xComponentController);
const myGLRenderer = new MyGLRenderer(xComponent);

xComponentController.setSurfaceCallback(myGLRenderer);

这段代码展示了如何在HarmonyOS中使用OpenGL ES渲染到XComponent。MyGLRenderer类实现了XComponentSurface.Callback接口，用于处理OpenGL ES的初始化和渲染。onSurfaceCreated方法用于初始化OpenGL ES，onSurfaceChanged方法用于处理视口变化，onDrawFrame方法用于执行渲染操作。

以下是在HarmonyOS鸿蒙Next中使用OpenGL ES渲染到XComponent的代码示例：

import ohos.agp.components.XComponent;
import ohos.agp.components.XComponent.DrawTask;
import ohos.agp.components.XComponent.EGLConfigChooser;
import ohos.agp.components.XComponent.EGLContextFactory;
import ohos.agp.components.XComponent.EGLWindowSurfaceFactory;
import ohos.agp.components.XComponent.Renderer;
import ohos.agp.utils.RectFloat;
import ohos.agp.window.service.DisplayManager;
import ohos.app.Context;
import ohos.global.resource.ResourceManager;
import ohos.hiviewdfx.HiLog;
import ohos.hiviewdfx.HiLogLabel;
import javax.microedition.khronos.egl.EGL10;
import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.egl.EGLContext;
import javax.microedition.khronos.egl.EGLDisplay;
import javax.microedition.khronos.egl.EGLSurface;
import javax.microedition.khronos.opengles.GL10;
import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;

public class OpenGLRenderer implements Renderer {
    private static final HiLogLabel LABEL = new HiLogLabel(HiLog.LOG_APP, 0x00201, "OpenGLRenderer");

    private float[] triangleCoords = {
            0.0f,  0.5f, 0.0f,
            -0.5f, -0.5f, 0.0f,
            0.5f, -0.5f, 0.0f
    };

    private FloatBuffer vertexBuffer;

    public OpenGLRenderer() {
        ByteBuffer bb = ByteBuffer.allocateDirect(triangleCoords.length * 4);
        bb.order(ByteOrder.nativeOrder());
        vertexBuffer = bb.asFloatBuffer();
        vertexBuffer.put(triangleCoords);
        vertexBuffer.position(0);
    }

    @Override
    public void onSurfaceCreated(GL10 gl, EGLConfig config) {
        gl.glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
    }

    @Override
    public void onSurfaceChanged(GL10 gl, int width, int height) {
        gl.glViewport(0, 0, width, height);
    }

    @Override
    public void onDrawFrame(GL10 gl) {
        gl.glClear(GL10.GL_COLOR_BUFFER_BIT);

        gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
        gl.glVertexPointer(3, GL10.GL_FLOAT, 0, vertexBuffer);
        gl.glDrawArrays(GL10.GL_TRIANGLES, 0, 3);
        gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
    }
}

public class MainAbilitySlice extends AbilitySlice {
    private XComponent xComponent;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        xComponent = (XComponent) findComponentById(ResourceTable.Id_xcomponent);
        xComponent.setRenderer(new OpenGLRenderer());
    }
}

代码说明：

  1. OpenGLRenderer：实现Renderer接口，负责OpenGL ES的初始化、渲染逻辑。
  2. onSurfaceCreated：设置背景色。
  3. onSurfaceChanged：设置视口大小。
  4. onDrawFrame：绘制三角形。
  5. MainAbilitySlice：在onStart中设置XComponent的渲染器为OpenGLRenderer。

确保布局文件ability_main.xml中包含XComponent组件。此代码实现了在XComponent中渲染一个简单的三角形。

回到顶部