Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
提交 ce20a2f5 编写于 作者: W wusongqing
浏览文件
操作

updated docs 

Signed-off-by: Nwusongqing <wusongqing@huawei.com>
上级 5792198c
隐藏空白更改
内联 并排
Showing with 20 addition and 34 deletion
en/application-dev/webgl/webgl-guidelines.md
浏览文件 @ ce20a2f5
...@@ -7,36 +7,29 @@ WebGL helps you process graphics at the frontend, for example, drawing color gra ...@@ -7,36 +7,29 @@ WebGL helps you process graphics at the frontend, for example, drawing color gra
## Available APIs ## Available APIs
To use WebGL, you must import the following module: **Table 1** WebGL APIs
| API| Description|
```
import webgl from "@ohos.webglnapi";
```
**Table 1** WebGL APIs
| API | Description |
| -------- | -------- | | -------- | -------- |
| canvas.getContext | Obtains&nbsp;the&nbsp;canvas&nbsp;context. | | canvas.getContext | Obtains the canvas context.|
| webgl.createBuffer():&nbsp;WebGLBuffer&nbsp;\|&nbsp;null | Creates&nbsp;and&nbsp;initializes&nbsp;a&nbsp;WebGL&nbsp;buffer. | | webgl.createBuffer():&nbsp;WebGLBuffer&nbsp;\|&nbsp;null | Creates and initializes a WebGL buffer.|
| webgl.bindBuffer(target:&nbsp;GLenum,&nbsp;buffer:&nbsp;WebGLBuffer&nbsp;\|&nbsp;null):&nbsp;void | Binds&nbsp;the&nbsp;WebGL&nbsp;buffer&nbsp;to&nbsp;the&nbsp;target. | | webgl.bindBuffer(target:&nbsp;GLenum,&nbsp;buffer:&nbsp;WebGLBuffer&nbsp;\|&nbsp;null):&nbsp;void | Binds the WebGL buffer to the target.|
| webgl.bufferData(target:&nbsp;GLenum,&nbsp;srcData:&nbsp;ArrayBufferView,&nbsp;usage:&nbsp;GLenum,&nbsp;srcOffset:&nbsp;GLuint,&nbsp;length?:&nbsp;GLuint):&nbsp;void | Creates&nbsp;and&nbsp;initializes&nbsp;the&nbsp;WebGL&nbsp;buffer&nbsp;object's&nbsp;data&nbsp;store. | | webgl.bufferData(target:&nbsp;GLenum,&nbsp;srcData:&nbsp;ArrayBufferView,&nbsp;usage:&nbsp;GLenum,&nbsp;srcOffset:&nbsp;GLuint,&nbsp;length?:&nbsp;GLuint):&nbsp;void | Creates and initializes the WebGL buffer object's data store.|
| webgl.getAttribLocation(program:&nbsp;WebGLProgram,&nbsp;name:&nbsp;string):&nbsp;GLint | Obtains&nbsp;the&nbsp;address&nbsp;of&nbsp;the&nbsp;**attribute**&nbsp;variable&nbsp;in&nbsp;the&nbsp;shader&nbsp;from&nbsp;the&nbsp;given&nbsp;WebGLProgram. | | webgl.getAttribLocation(program:&nbsp;WebGLProgram,&nbsp;name:&nbsp;string):&nbsp;GLint | Obtains the address of the **attribute** variable in the shader from the given WebGLProgram.|
| webgl.vertexAttribPointer(index:&nbsp;GLuint,&nbsp;size:&nbsp;GLint,&nbsp;type:&nbsp;GLenum,&nbsp;normalized:&nbsp;GLboolean,&nbsp;stride:&nbsp;GLsizei,&nbsp;offset:&nbsp;GLintptr):&nbsp;void | Assigns&nbsp;a&nbsp;**Buffer**&nbsp;object&nbsp;to&nbsp;a&nbsp;variable. | | webgl.vertexAttribPointer(index:&nbsp;GLuint,&nbsp;size:&nbsp;GLint,&nbsp;type:&nbsp;GLenum,&nbsp;normalized:&nbsp;GLboolean,&nbsp;stride:&nbsp;GLsizei,&nbsp;offset:&nbsp;GLintptr):&nbsp;void | Assigns a **Buffer** object to a variable.|
| webgl.enableVertexAttribArray(index:&nbsp;GLuint):&nbsp;void | Connects&nbsp;a&nbsp;variable&nbsp;to&nbsp;the&nbsp;**Buffer**&nbsp;object&nbsp;allocated&nbsp;to&nbsp;it. | | webgl.enableVertexAttribArray(index:&nbsp;GLuint):&nbsp;void | Connects a variable to the **Buffer** object allocated to it.|
| webgl.clearColor(red:&nbsp;GLclampf,&nbsp;green:&nbsp;GLclampf,&nbsp;blue:&nbsp;GLclampf,&nbsp;alpha:&nbsp;GLclampf):&nbsp;void | Clears&nbsp;the&nbsp;specified&nbsp;color&nbsp;on&nbsp;the&nbsp;**&lt;canvas&gt;**&nbsp;component. | | webgl.clearColor(red:&nbsp;GLclampf,&nbsp;green:&nbsp;GLclampf,&nbsp;blue:&nbsp;GLclampf,&nbsp;alpha:&nbsp;GLclampf):&nbsp;void | Clears the specified color on the **\<canvas>** component.|
| webgl.clear(mask:&nbsp;GLbitfield):&nbsp;void | Clears&nbsp;the&nbsp;**&lt;canvas&gt;**&nbsp;component. | | webgl.clear(mask:&nbsp;GLbitfield):&nbsp;void | Clears the **\<canvas>** component.|
| webgl.drawArrays(mode:&nbsp;GLenum,&nbsp;first:&nbsp;GLint,&nbsp;count:&nbsp;GLsizei):&nbsp;void | Draws&nbsp;data. | | webgl.drawArrays(mode:&nbsp;GLenum,&nbsp;first:&nbsp;GLint,&nbsp;count:&nbsp;GLsizei):&nbsp;void | Draws data.|
| webgl.flush():&nbsp;void | Flushes&nbsp;data&nbsp;to&nbsp;the&nbsp;GPU&nbsp;and&nbsp;clears&nbsp;the&nbsp;buffer. | | webgl.flush():&nbsp;void | Flushes data to the GPU and clears the buffer.|
| webgl.createProgram():&nbsp;WebGLProgram&nbsp;\|&nbsp;null | Creates&nbsp;a&nbsp;**WebGLProgram**&nbsp;object. | | webgl.createProgram():&nbsp;WebGLProgram&nbsp;\|&nbsp;null | Creates a **WebGLProgram** object.|
## How to Develop ## How to Develop
The following describes how to draw a 2D image without using shaders and how to draw a color triangle using shaders. The following describes how to draw a 2D image without using shaders and how to draw a color triangle using shaders.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **Note：** > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> When using WebGL for development, use a real device to ensure the GUI display effect. > When using WebGL for development, use a real device to ensure the GUI display effect.
...@@ -45,7 +38,6 @@ The following describes how to draw a 2D image without using shaders and how to ...@@ -45,7 +38,6 @@ The following describes how to draw a 2D image without using shaders and how to
To draw a 2D image without using WebGL, that is, to implement CPU rather than GPU drawing, perform the following steps: To draw a 2D image without using WebGL, that is, to implement CPU rather than GPU drawing, perform the following steps:
1. Create a page layout in the **index.hml** file. The following is an example of the file content: 1. Create a page layout in the **index.hml** file. The following is an example of the file content:
``` ```
<div class="container"> <div class="container">
<canvas ref="canvas1" style="width : 400px; height : 200px; background-color : lightyellow;"></canvas> <canvas ref="canvas1" style="width : 400px; height : 200px; background-color : lightyellow;"></canvas>
...@@ -54,7 +46,6 @@ To draw a 2D image without using WebGL, that is, to implement CPU rather than GP ...@@ -54,7 +46,6 @@ To draw a 2D image without using WebGL, that is, to implement CPU rather than GP
``` ```
2. Set the page style in the **index.css** file. The following is an example of the file content: 2. Set the page style in the **index.css** file. The following is an example of the file content:
``` ```
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -72,7 +63,6 @@ To draw a 2D image without using WebGL, that is, to implement CPU rather than GP ...@@ -72,7 +63,6 @@ To draw a 2D image without using WebGL, that is, to implement CPU rather than GP
``` ```
3. Edit the **index.js** file to add the 2D drawing logic code. The following is an example of the file content: 3. Edit the **index.js** file to add the 2D drawing logic code. The following is an example of the file content:
``` ```
//index.js //index.js
export default { // Native API interaction code export default { // Native API interaction code
...@@ -108,7 +98,7 @@ To draw a 2D image without using WebGL, that is, to implement CPU rather than GP ...@@ -108,7 +98,7 @@ To draw a 2D image without using WebGL, that is, to implement CPU rather than GP
} }
``` ```
**Figure 1** Effect of clicking the button to draw a 2D image **Figure 1** Effect of clicking the button to draw a 2D image
![en-us_image_0000001192269746](figures/en-us_image_0000001192269746.gif) ![en-us_image_0000001192269746](figures/en-us_image_0000001192269746.gif)
...@@ -118,8 +108,7 @@ To draw a 2D image without using WebGL, that is, to implement CPU rather than GP ...@@ -118,8 +108,7 @@ To draw a 2D image without using WebGL, that is, to implement CPU rather than GP
To use WebGL to draw a color triangle (GPU drawing), perform the following steps: To use WebGL to draw a color triangle (GPU drawing), perform the following steps:
1. Create a page layout. The following is an example of the **index.hml** file: 1. Create a page layout in the **index.hml** file. The following is an example of the file content:
``` ```
<div class="container"> <div class="container">
<canvas ref="canvas1" style="width : 400px; height : 200px; background-color : lightyellow;"></canvas> <canvas ref="canvas1" style="width : 400px; height : 200px; background-color : lightyellow;"></canvas>
...@@ -127,8 +116,7 @@ To use WebGL to draw a color triangle (GPU drawing), perform the following steps ...@@ -127,8 +116,7 @@ To use WebGL to draw a color triangle (GPU drawing), perform the following steps
</div> </div>
``` ```
2. Set the page style. The following is an example of the **index.css** file: 2. Set the page style in the **index.css** file. The following is an example of the file content:
``` ```
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -145,11 +133,9 @@ To use WebGL to draw a color triangle (GPU drawing), perform the following steps ...@@ -145,11 +133,9 @@ To use WebGL to draw a color triangle (GPU drawing), perform the following steps
} }
``` ```
3. Edit the JavaScript code file to add the logic code for drawing a color triangle. The following is an example of the **index.js** file: 3. Edit the JavaScript code file to add the logic code for drawing a color triangle. The following is an example of the file content:
``` ```
//index.js //index.js
import webgl from "@ohos.webglnapi"; // Import the WebGL module.
// WebGL-related predefinition // WebGL-related predefinition
var gl = { var gl = {
...@@ -710,6 +696,6 @@ To use WebGL to draw a color triangle (GPU drawing), perform the following steps ...@@ -710,6 +696,6 @@ To use WebGL to draw a color triangle (GPU drawing), perform the following steps
``` ```
**Figure 2** Effect of clicking the button to draw a color triangle **Figure 2** Effect of clicking the button to draw a color triangle
![en-us_image_0000001192429306](figures/en-us_image_0000001192429306.gif) ![en-us_image_0000001192429306](figures/en-us_image_0000001192429306.gif)
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或