From ce20a2f54c9ab728f01f29ff69255db976883b50 Mon Sep 17 00:00:00 2001 From: wusongqing Date: Wed, 30 Mar 2022 17:47:59 +0800 Subject: [PATCH] updated docs Signed-off-by: wusongqing --- en/application-dev/webgl/webgl-guidelines.md | 54 ++++++++------------ 1 file changed, 20 insertions(+), 34 deletions(-) diff --git a/en/application-dev/webgl/webgl-guidelines.md b/en/application-dev/webgl/webgl-guidelines.md index 2d6f0f756a..248cf4d550 100644 --- a/en/application-dev/webgl/webgl-guidelines.md +++ b/en/application-dev/webgl/webgl-guidelines.md @@ -7,36 +7,29 @@ WebGL helps you process graphics at the frontend, for example, drawing color gra ## Available APIs -To use WebGL, you must import the following module: +**Table 1** WebGL APIs - -``` -import webgl from "@ohos.webglnapi"; -``` - - **Table 1** WebGL APIs - -| API | Description | +| API| Description| | -------- | -------- | -| canvas.getContext | Obtains the canvas context. | -| webgl.createBuffer(): WebGLBuffer \| null | Creates and initializes a WebGL buffer. | -| webgl.bindBuffer(target: GLenum, buffer: WebGLBuffer \| null): void | Binds the WebGL buffer to the target. | -| webgl.bufferData(target: GLenum, srcData: ArrayBufferView, usage: GLenum, srcOffset: GLuint, length?: GLuint): void | Creates and initializes the WebGL buffer object's data store. | -| webgl.getAttribLocation(program: WebGLProgram, name: string): GLint | Obtains the address of the **attribute** variable in the shader from the given WebGLProgram. | -| webgl.vertexAttribPointer(index: GLuint, size: GLint, type: GLenum, normalized: GLboolean, stride: GLsizei, offset: GLintptr): void | Assigns a **Buffer** object to a variable. | -| webgl.enableVertexAttribArray(index: GLuint): void | Connects a variable to the **Buffer** object allocated to it. | -| webgl.clearColor(red: GLclampf, green: GLclampf, blue: GLclampf, alpha: GLclampf): void | Clears the specified color on the **<canvas>** component. | -| webgl.clear(mask: GLbitfield): void | Clears the **<canvas>** component. | -| webgl.drawArrays(mode: GLenum, first: GLint, count: GLsizei): void | Draws data. | -| webgl.flush(): void | Flushes data to the GPU and clears the buffer. | -| webgl.createProgram(): WebGLProgram \| null | Creates a **WebGLProgram** object. | +| canvas.getContext | Obtains the canvas context.| +| webgl.createBuffer(): WebGLBuffer \| null | Creates and initializes a WebGL buffer.| +| webgl.bindBuffer(target: GLenum, buffer: WebGLBuffer \| null): void | Binds the WebGL buffer to the target.| +| webgl.bufferData(target: GLenum, srcData: ArrayBufferView, usage: GLenum, srcOffset: GLuint, length?: GLuint): void | Creates and initializes the WebGL buffer object's data store.| +| webgl.getAttribLocation(program: WebGLProgram, name: string): GLint | Obtains the address of the **attribute** variable in the shader from the given WebGLProgram.| +| webgl.vertexAttribPointer(index: GLuint, size: GLint, type: GLenum, normalized: GLboolean, stride: GLsizei, offset: GLintptr): void | Assigns a **Buffer** object to a variable.| +| webgl.enableVertexAttribArray(index: GLuint): void | Connects a variable to the **Buffer** object allocated to it.| +| webgl.clearColor(red: GLclampf, green: GLclampf, blue: GLclampf, alpha: GLclampf): void | Clears the specified color on the **\** component.| +| webgl.clear(mask: GLbitfield): void | Clears the **\** component.| +| webgl.drawArrays(mode: GLenum, first: GLint, count: GLsizei): void | Draws data.| +| webgl.flush(): void | Flushes data to the GPU and clears the buffer.| +| webgl.createProgram(): WebGLProgram \| null | Creates a **WebGLProgram** object.| ## How to Develop 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. @@ -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: 1. Create a page layout in the **index.hml** file. The following is an example of the file content: - ```
@@ -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: - ``` .container { flex-direction: column; @@ -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: - ``` //index.js 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 } ``` - **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) @@ -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: -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: ```
@@ -127,8 +116,7 @@ To use WebGL to draw a color triangle (GPU drawing), perform the following steps
``` -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 { flex-direction: column; @@ -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 - import webgl from "@ohos.webglnapi"; // Import the WebGL module. // WebGL-related predefinition var gl = { @@ -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) -- GitLab