Skip to content

Commit 4e0184f

Browse files
nikki93expbot
authored andcommitted
Update GLView docs a bit
fbshipit-source-id: 8370cf5
1 parent 33276bb commit 4e0184f

File tree

1 file changed

+18
-31
lines changed

1 file changed

+18
-31
lines changed

versions/unversioned/sdk/gl-view.md

Lines changed: 18 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -9,48 +9,35 @@ A `View` that acts as an OpenGL ES render target. On mounting, an OpenGL ES cont
99
Other than the regular `View` props for layout and touch handling, the following props are available:
1010

1111
`onContextCreate`
12-
A function that will be called when the OpenGL ES context is created. The function is passed a single argument [gl](#gl-object) that acts as an interface to the underlying OpenGL ES context.
12+
A function that will be called when the OpenGL ES context is created. The function is passed a single argument `gl` that has a [WebGLRenderingContext](https://www.khronos.org/registry/webgl/specs/latest/1.0/#5.14) interface.
1313

1414
`msaaSamples`
1515
`GLView` can enable iOS's built-in [multisampling](https://www.khronos.org/registry/OpenGL/extensions/APPLE/APPLE_framebuffer_multisample.txt). This prop specifies the number of samples to use. By default this is 4. Setting this to 0 turns off multisampling. On Android this is ignored.
1616

17-
## Examples
17+
## High-level APIs
1818

19-
Here are a couple examples of the use of `GLView` on Snack:
19+
Since the WebGL API is quite low-level, it can be helpful to use higher-level graphics APIs rendering through a `GLView` underneath. The following libraries integrate popular graphics APIs:
2020

21-
- [Basic plain WebGL example](https://snack.expo.io/SJaCWirsg)
22-
- [Rotating red box with THREE.js](https://snack.expo.io/rkpPMg8ie)
23-
- [Game of Life with REGL](https://snack.expo.io/HkjUrfIje)
21+
- [expo-three](https://github.com/expo/expo-three) for [three.js](https://threejs.org)
22+
- [expo-processing](https://github.com/expo/expo-processing) for [processing.js](http://processingjs.org)
2423

25-
The [@community/gl-test](https://expo.io/@community/gl-test) Expo app demonstrates a number of example scenes. The image below is a low-quality capture, try the app on Expo for the best-quality experience. The source code for these scenes is available [here](https://github.com/exponent/gl-test/tree/master/Scenes)
24+
Any WebGL-supporting library that expects a [WebGLRenderingContext](https://www.khronos.org/registry/webgl/specs/latest/1.0/#5.14) could be used. Some times such libraries assume a web JavaScript context (such as assuming `document`). Usually this is for resource loading or event handling, with the main rendering logic still only using pure WebGL. So these libraries can usually still be used with a couple workarounds. The Expo-specific integrations above include workarounds for some popular libraries.
2625

27-
![](./gl-test.gif)
26+
## WebGL API
2827

29-
## The `gl` object
30-
31-
Once the component is mounted and the OpenGL ES context has been created, the gl object received through the [`onContextCreate`](#expoglviewoncontextcreate "Expo.GLView.onContextCreate") prop becomes the interface to the OpenGL ES context, providing a WebGL-like API. It resembles a [WebGLRenderingContext](https://www.khronos.org/registry/webgl/specs/latest/1.0/#5.14) in the WebGL 1 spec. An additional method `gl.endFrameEXP()` is present which notifies the context that the current frame is ready to be presented. This is similar to a 'swap buffers' API call in other OpenGL platforms.
28+
Once the component is mounted and the OpenGL ES context has been created, the `gl` object received through the [`onContextCreate`](#expoglviewoncontextcreate "Expo.GLView.onContextCreate") prop becomes the interface to the OpenGL ES context, providing a WebGL API. It resembles a [WebGLRenderingContext](https://www.khronos.org/registry/webgl/specs/latest/1.0/#5.14) in the WebGL 1 spec. An additional method `gl.endFrameEXP()` is present which notifies the context that the current frame is ready to be presented. This is similar to a 'swap buffers' API call in other OpenGL platforms.
3229

3330
The following WebGLRenderContext methods are currently unimplemented:
3431

35-
- Framebuffer
36-
- `framebufferRenderbuffer`
37-
- `getFramebufferAttachmentParameter`
38-
- Renderbuffer
39-
- `bindRenderbuffer`
40-
- `createRenderbuffer`
41-
- `deleteRenderbuffer`
42-
- `getRenderbufferParameter`
43-
- `renderbufferStorage`
44-
- Texture
45-
- `compressedTexImage2D`
46-
- `compressedTexSubImage2D`
47-
- `getTexParameter`
48-
- `texSubImage2D`
49-
- Uniforms and Attributes
50-
- `getUniform`
51-
- `getVertexAttrib`
52-
- `getVertexAttribOffset`
53-
54-
`texImage2D` only supports the 9-argument form. The last argument must either be an ArrayBuffer with the texture data as in the WebGL spec, an `Expo.Asset` refering to an image to use as the source for the texture, or null. See [gl-test](https://github.com/exponent/gl-test/blob/deedfac1b7b6f9c9ce6e42a3b51700cf47da773c/Scenes/BasicTextureScene.js#L85-L88) for an example of using image assets as OpenGL textures.
32+
- `getFramebufferAttachmentParameter()`
33+
- `getRenderbufferParameter()`
34+
- `compressedTexImage2D()`
35+
- `compressedTexSubImage2D()`
36+
- `getTexParameter()`
37+
- `getUniform()`
38+
- `getVertexAttrib()`
39+
- `getVertexAttribOffset()`
40+
41+
The `pixels` argument of [`texImage2D()`](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/texImage2D) must be `null`, an `ArrayBuffer` with pixel data, or an object of the form `{ localUri }` where `localUri` is the `file://` URI of an image in the device's file system. Thus an `Expo.Asset` object could be used once `.downloadAsync()` has been called on it (and completed) to fetch the resource.
5542

5643
For efficiency reasons the current implementations of the methods don't perform type or bounds checking on their arguments. So, passing invalid arguments could cause a native crash. We plan to update the API to perform argument checking in upcoming SDK versions. Currently the priority for error checking is low since engines generally don't rely on the OpenGL API to perform argument checking and, even otherwise, checks performed by the underlying OpenGL ES implementation are often sufficient.

0 commit comments

Comments
 (0)