From 1fa77198703f04d66c50f4d563f091ea7866cf78 Mon Sep 17 00:00:00 2001 From: wusongqing Date: Thu, 7 Jul 2022 14:13:11 +0800 Subject: [PATCH] update docs against 6193 Signed-off-by: wusongqing --- en/application-dev/webgl/webgl-guidelines.md | 28 ++++++++++++-------- 1 file changed, 17 insertions(+), 11 deletions(-) diff --git a/en/application-dev/webgl/webgl-guidelines.md b/en/application-dev/webgl/webgl-guidelines.md index 23b4feca5f..f541b6328a 100644 --- a/en/application-dev/webgl/webgl-guidelines.md +++ b/en/application-dev/webgl/webgl-guidelines.md @@ -12,17 +12,17 @@ WebGL helps you process graphics at the frontend, for example, drawing color gra | 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 **\** 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.| +| 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 @@ -699,3 +699,9 @@ 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 ![en-us_image_0000001192429306](figures/en-us_image_0000001192429306.gif) + +## Samples + +The following sample is provided to help you better understand how to develop WebGL: + +- [`JsWbgGL`: WebGL (JS, API version 8)](https://gitee.com/openharmony/app_samples/tree/master/Graphics/JsWebGL) -- GitLab