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

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 语言所写)。

四、运作机制

图1 WebGL运作机制

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

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

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

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

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

本文参考引用HarmonyOS官方开发文档,基于API9。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/729554.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

解读:DUSt3R: Geometric 3D Vision Made Easy

概述:给定一个无约束图像集,即一组具有未知相机姿态和内在特征的照片,我们提出的 DUSt3R 方法会输出一组相应的点阵图,从中我们可以直接恢复通常难以一次性估算的各种几何量,如相机参数、像素对应关系、深度图和完全一…

【PCIe】 PCIe 拓扑结构与分层结构

🔥博客主页:PannLZ 文章目录 PCIe拓扑结构PCIe分层结构 PCIe拓扑结构 计算机网络中的拓扑结构源于拓扑学(研究与大小、形状无关的点、线关系的方法)。 把网络中的计算机和通信设备抽象为一个点,把传输介质抽象为一条线,由点和线组…

【物联网】stm32芯片结构组成,固件库、启动过程、时钟系统、GPIO、NVIC、DMA、UART以及看门狗电路的全面详解

一、stm32的介绍 1、概述 stm32: ST:指意法半导体 M:指定微处理器 32:表示计算机处理器位数 与ARM关系:采用ARM推出cortex-A,R,M三系中的M系列,其架构主要基于ARMv7-M实现 ARM分成三个系列: Cortex-A&…

【排序算法】推排序算法解析:从原理到实现

目录 1. 引言 2. 推排序算法原理 3. 推排序的时间复杂度分析 4. 推排序的应用场景 5. 推排序的优缺点分析 5.1 优点: 5.2 缺点: 6. Java、JavaScript 和 Python 实现推排序算法 6.1 Java 实现: 6.2 JavaScript 实现: 6.…

K8S之实现业务的金丝雀发布

如何实现金丝雀发布 金丝雀发布简介优缺点在k8s中实现金丝雀发布 金丝雀发布简介 金丝雀发布的由来:17 世纪,英国矿井工人发现,金丝雀对瓦斯这种气体十分敏感。空气中哪怕有极其微量的瓦斯,金丝雀也会停止歌唱;当瓦斯…

【JS逆向学习】猿人学 第五题 js混淆 乱码

逆向目标 网址:https://match.yuanrenxue.cn/match/5接口:https://match.yuanrenxue.cn/api/match/5?page2&m1709806560791&f1709806560000参数: Cookie(m、RM4hZBv0dDon443M)payload(m、f) 逆向过程 老规矩,上来先分…

第24集《灵峰宗论导读》

请大家打开讲义第79面。 在第一段呢蕅益大师先讲到这个诸法实相的妙理,说从我们现前一念心性来观察诸法实相有两个角度: 第一个角度呢就是当我们摄用归体的时候,所谓万法唯识一心的时候,这个时候我们会发觉三世诸佛,…

vue实现文字手工动态打出效果

vue实现文字手工动态打出效果 问题背景 本文实现vue中&#xff0c;动态生成文字手动打出效果。 问题分析 话不多说&#xff0c;直接上代码&#xff1a; <template><main><button click"makeText"><p class"text">点击生成内容…

启动vue项目执行npm run serve报错 : error in ./src/element-variables.scss

error in ./src/element-variables.scss 问题原因 node-sass的版本问题 解决方式 我直接更新了一下node-sass&#xff0c;就好了 npm install node-sass 再次执行就可以执行成功了

如何设置WhatsApp Business账号?

WhatsApp Business是WhatsApp为企业打造的一款应用程序&#xff0c;旨在帮助企业与客户更轻松地互动。如果您是一家出海企业&#xff0c;想要更好地与客户沟通&#xff0c;那么WhatsApp Business账号是您不可或缺的工具。 以下是设置WhatsApp Business账号的步骤&#xff1a; …

AIGC绘画关键词 - 写实少女

Unity3D特效百例案例项目实战源码Android-Unity实战问题汇总游戏脚本-辅助自动化Android控件全解手册再战Android系列Scratch编程案例软考全系列Unity3D学习专栏蓝桥系列ChatGPT和AIGC &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分…

MongoDB黑窗口操作(CRUD)

目录 连接数据库 插入数据 for循环插入数据 根据条件查询 修改数据 删除数据 连接数据库 对应路径下cmd中输入命令mongo即可 插入数据 j{name:"mongo"} t{x:3} 提交&#xff1a;db.things.svae(j);db.things.svae(t); 查询&#xff1a;db.things.find(); …

Java面试挂在线程创建后续,不要再被八股文误导了!创建线程的方式只有1种

线程创建之源 OK&#xff01;咱们闲话少叙&#xff0c;直接进入正题&#xff0c;回顾一下通过实现Runnable接口&#xff0c;重写run方法创建线程的方式&#xff0c;真的可以创建一个线程吗&#xff1f;来看下面这段demo。 【代码示例1】 public class Test implements Runnab…

信号处理--使用CNN+LSTM实现单通道脑电信号EEG的睡眠分期评估

目录 背景 亮点 环境配置 数据 方法 结果 代码获取 参考文献 背景 睡眠对人体健康很重要。监测人体的睡眠分期对于人体健康和医疗具有重要意义。 亮点 架构在第一层使用两个具有不同滤波器大小的 CNN 和双向 LSTM。 CNN 可以被训练来学习滤波器&#xff0c;以从原始…

redis缓存(穿透, 雪崩, 击穿, 数据不一致, 数据并发竞争 ), 分布式锁(watch乐观锁, setnx, redission)

redis的watch缓存机制 WATCH 机制原理&#xff1a; WATCH 机制&#xff1a;使用 WATCH 监视一个或多个 key , 跟踪 key 的 value 修改情况&#xff0c;如果有key 的 value 值在事务 EXEC 执行之前被修改了&#xff0c;整个事务被取消。EXEC 返回提示信息&#xff0c;表示 事务已…

Linux安装,配置,启动HBase

Linux安装&#xff0c;配置&#xff0c;启动HBase 一、HBase安装&#xff0c;配置 1、下载HBase安装包 Hbase官方下载地址: http://archive.apache.org/dist/hbase 选择相应的版本点击下载&#xff0c;这里以2.3.5为例 # linux可以通过wget命令下载 wget https://archive…

Windows11安装FFmpeg最新版本

打开终端: 输入 winget install ffmpeg 然后输入 Y 回车后出现如下图: 正在下载FFmpeg 6.1 安装成功 测试

STM32CubeIDE基础学习-STM32CubeIDE软件配置下载器方法

STM32CubeIDE基础学习-STM32CubeIDE软件配置下载器方法 文章目录 STM32CubeIDE基础学习-STM32CubeIDE软件配置下载器方法前言第1章 配置ST-LINK下载器第2章 配置DAP下载器总结 前言 这个软件编译完之后&#xff0c;可以使用下载器进行在线下载程序或仿真调试程序&#xff0c;也…

050-WEB攻防-PHP应用文件包含LFIRFI伪协议编码算法无文件利用黑白盒

050-WEB攻防-PHP应用&文件包含&LFI&RFI&伪协议编码算法&无文件利用&黑白盒 #知识点&#xff1a; 1、文件包含-原理&分类&危害-LFI&RFI 2、文件包含-利用-黑白盒&无文件&伪协议 演示案例&#xff1a; ➢文件包含-原理&分类&am…

设计模式(工厂模式)

设计模式&#xff08;工厂模式&#xff09; 一、工厂模式介绍 在工厂模式中&#xff0c;父类决定生成示例的方式&#xff0c;但不决定所要生成的具体的类&#xff0c;具体的处理部分交给子类负责。这样就可以将生成示例的框架和生成示例的类解耦。 二、示例程序 以下示例程…