0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

鸿蒙OS元服务开发:【WebGL网页图形库开发概述】

jf_46214456 来源:jf_46214456 作者:jf_46214456 2024-04-02 17:26 次阅读

WebGL的全称为Web Graphic Library(网页图形库),主要用于交互式渲染2D图形和3D图形。目前HarmonyOS中使用的WebGL是基于OpenGL裁剪的OpenGL ES,可以在HTML5的canvas元素对象中使用,无需使用插件,支持跨平台。WebGL程序是由JavaScript代码组成的,其中使用的API可以利用用户设备提供的GPU硬件完成图形渲染和加速。基本概念如下。

一、着色器

可以理解为运行在显卡中的指令和数据。在WebGL中,着色器是用OpenGL ES着色语言(GLSL)编写的。

完整的着色器包括顶点着色器和片元着色器。顶点着色器和片元着色器的交互则涉及到图片光栅化。

顶点着色器:最基本的任务是接收三维空间中点的坐标,将其处理为二维空间中的坐标并输出。

片元着色器:最基本的任务是对需要处理的屏幕上的每个像素输出一个颜色值。

图片光栅化:将顶点着色器输出的二维空间中的点坐标,转化为需要处理的像素并传递给片元着色器的过程。

二、缓冲区

驻存于内存中的JavaScript对象,存储着即将推送到着色器中的attribute对象。

三、着色器程序

将缓冲区中的数据推送到着色器中还需涉及“着色器程序”,一个负责关联着色器和缓冲区的JavaScript对象。一个WebGLProgram 对象由两个编译过后的 WebGLShader 组成,即顶点着色器和片段着色器(均由 GLSL 语言所写)。

四、鸿蒙开发技术已更新[qr23.cn/AKFP8k]参考前往。

搜狗高速浏览器截图20240326151450.png

五、运作机制

或者添加mau123789是v直接拿去鸿蒙NEXT技术文档

图1 WebGL运作机制

应用前端HTML5绘制界面组件。

Native API完成前端JavaScript与C++代码交互。

JavaScript engine为图形框架,为WebGL模块提供绘制对象Surface。

WebGL模块对外暴露OpenGL ES的GPU绘制接口

中间接口层EGL(Embedded Graphics Library)完成不同平台的适配。

审核编辑 黄宇

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • gpu
    gpu
    +关注

    关注

    28

    文章

    4729

    浏览量

    128897
  • HarmonyOS
    +关注

    关注

    79

    文章

    1974

    浏览量

    30147
  • 鸿蒙OS
    +关注

    关注

    0

    文章

    188

    浏览量

    4383
收藏 人收藏

    评论

    相关推荐

    鸿蒙OS服务开发案例:【WebGL网页图形开发着色器绘制彩色三角形】

    使用WebGL开发时,为保证界面图形显示效果,请使用真机运行。
    的头像 发表于 04-02 15:12 1853次阅读

    鸿蒙原生应用/服务实战-Web隐私声明

    这个位置的隐私申明是需要在WEB网页下完成的,ArkTS鸿蒙原生应用与服务开发者,不一定熟悉这块,一些公司也不一定有自己的
    发表于 01-24 15:05

    鸿蒙开发WebGL】简单了解

    WebGL的全称为Web Graphic Library(网页图形),主要用于交互式渲染2D图形和3D
    发表于 02-25 21:56

    鸿蒙原生应用服务开发-WebGL网页图形开发概述

    WebGL的全称为Web Graphic Library(网页图形),主要用于交互式渲染2D图形和3D
    发表于 03-08 14:24

    鸿蒙原生应用服务开发-WebGL网页图形开发接口说明

    一、场景介绍 WebGL主要帮助开发者在前端开发中完成图形图像的相关处理,比如绘制彩色图形等。目前该功能仅支持使用兼容JS的类Web
    发表于 03-11 15:51

    鸿蒙原生应用服务开发-WebGL网页图形开发无着色器绘制2D图形

    无着色器绘制2D图形 使用WebGL开发时,为保证界面图形显示效果,请使用真机运行。 此场景为未使用WebGL绘制的2D
    发表于 03-12 15:42

    HarmonyOS NEXT应用服务开发Intents Kit(意图框架服务)本地搜索方案概述

    一、概述 本地搜索是在HarmonyOS归一化搜索特性,开发者将应用/服务内的功能和内容通过意图框架共享到HarmonyOS,即可实现“一步搜索,内容直达”。 二、典型场景 以“音乐
    发表于 11-06 10:59

    鸿蒙原生开发手记:01-服务开发

    简介 服务鸿蒙中的一种轻量应用形态,无需下载,直接运行。类似于微信小程序,但与小程序不同的是,服务更加轻量。
    发表于 11-14 17:28

    鸿蒙原生开发手记:03-服务开发全流程(开发服务,只需要看这一篇文章)

    导读 本文带来非常详细的服务开发及上架全流程介绍包含服务介绍、创建、服务卡片、签名、
    发表于 11-23 21:52

    鸿蒙 OS 应用开发初体验

    的操作系统平台和开发框架。HarmonyOS 的目标是实现跨设备的无缝协同和高性能。 DevEco Studio 对标 Android Studio,开发鸿蒙 OS 应用的 IDE。
    发表于 11-02 19:38

    鸿蒙原生应用/服务开发-开发者如何进行真机测试

    前提条件:已经完成鸿蒙原生应用/服务开发,已经能相对熟练使用DevEco Studio,开发者自己有鸿
    发表于 11-30 09:46

    华为开发者大会2021鸿蒙os在哪场

    华为开发者大会2021将在10月22日-24日举办,地点为东莞松山湖,鸿蒙os 3.0或将与我们见面,那么华为开发者大会2021鸿蒙
    的头像 发表于 10-22 15:24 1897次阅读

    鸿蒙OS服务开发说明:【WebGL网页图形开发接口】

    WebGL主要帮助开发者在前端开发中完成图形图像的相关处理,比如绘制彩色图形等。目前该功能仅支持使用兼容JS的类Web
    的头像 发表于 04-02 17:02 462次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>OS</b><b class='flag-5'>元</b><b class='flag-5'>服务</b><b class='flag-5'>开发</b>说明:【<b class='flag-5'>WebGL</b><b class='flag-5'>网页</b><b class='flag-5'>图形</b><b class='flag-5'>库</b><b class='flag-5'>开发</b>接口】

    鸿蒙开发接口图形图像:【WebGL

    WebGL提供图形绘制的能力,包括对当前绘制图形的位置、颜色等进行处理。
    的头像 发表于 05-30 09:31 512次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>开发</b>接口<b class='flag-5'>图形</b>图像:【<b class='flag-5'>WebGL</b>】

    鸿蒙开发接口图形图像:【WebGL2】

    WebGL2支持图形的绘制,包括对当前绘制图形的位置、颜色等进行处理,其中相对WebGL来说对渲染管道和着色语言进行了增强。
    的头像 发表于 05-30 15:19 517次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>开发</b>接口<b class='flag-5'>图形</b>图像:【<b class='flag-5'>WebGL</b>2】