mirror of
https://github.com/visgl/luma.gl.git
synced 2025-12-08 17:36:19 +00:00
130 lines
3.7 KiB
Plaintext
130 lines
3.7 KiB
Plaintext
import {DeviceTabs} from '@site/src/react-luma';
|
|
|
|
# External WebGL Contexts
|
|
|
|
:::info
|
|
This page applies to WebGL only
|
|
:::
|
|
:::caution
|
|
External context example is temporarily disabled until support is added to luma.gl v9
|
|
:::
|
|
|
|
|
|
This tutorial will be a simple demonstration of how to use an externally created WebGL context
|
|
with luma.gl's higher-level APIs. So far, we have either created a WebGL context ourselves
|
|
to use with low-level APIs, or allowed the the `AnimationLoop` class to create a WebGL context for us.
|
|
luma.gl's higher-level APIs expect some instrumentation on the WebGL context,
|
|
so we can't just use a context we create ourselves with classes like `Model` and `Buffer`.
|
|
|
|
The `AnimationLoop` class performs this instrumentation for us using the `instrumentGLContext`
|
|
function from **@luma.gl/gltools**, and we can use this function directly
|
|
if we want to control creation of the context or use a context passed to us by another framework
|
|
(e.g. the GeoSpatial example uses this technique with a WebGL context
|
|
created by [MapboxGL](https://docs.mapbox.com/mapbox-gl-js/api/)).
|
|
|
|
We'll create a modified version of the [Hello Triangle](/docs/tutorials/hello-triangle) tutorial that creates a WebGL context manually rather than using the `AnimationLoop` class. To start with, we'll modify our imports:
|
|
|
|
```typescript
|
|
import {Model} from '@luma.gl/engine';
|
|
import {Buffer, clear} from '@luma.gl/webgl';
|
|
import {instrumentGLContext} from '@luma.gl/gltools';
|
|
```
|
|
|
|
We then create our context and pass it to `instrumentGLContext`:
|
|
|
|
```typescript
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = 800;
|
|
canvas.height = 600;
|
|
document.body.appendChild(canvas);
|
|
|
|
const gl = instrumentGLContext(canvas.getContext('webgl'));
|
|
```
|
|
|
|
This performs some polyfilling (done by `polyfillContext`, and we create our own render loop using `requestAnimationFrame` rather than using the `AnimationLoop` callbacks.
|
|
|
|
```typescript
|
|
const gl = instrumentGLContext(canvas.getContext('webgl'));
|
|
gl.clearColor(0, 0, 0, 1);
|
|
|
|
const positionBuffer = new Buffer(gl, new Float32Array([-0.5, -0.5, 0.5, -0.5, 0.0, 0.5]));
|
|
|
|
const colorBuffer = new Buffer(gl, new Float32Array([1.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 1.0]));
|
|
|
|
// ...
|
|
|
|
const model = new Model(gl, {
|
|
vs,
|
|
fs,
|
|
attributes: {
|
|
position: positionBuffer,
|
|
color: colorBuffer
|
|
},
|
|
vertexCount: 3
|
|
});
|
|
|
|
requestAnimationFrame(function draw() {
|
|
requestAnimationFrame(draw);
|
|
|
|
clear(gl, {color: [0, 0, 0, 1]});
|
|
model.draw();
|
|
});
|
|
```
|
|
|
|
If all went well, a tri-color triangle should render as it did in the **Hello Triangle** example. The full source code is listed below for reference:
|
|
|
|
```typescript
|
|
import {Model} from '@luma.gl/engine';
|
|
import {Buffer, clear} from '@luma.gl/webgl';
|
|
import {instrumentGLContext} from '@luma.gl/gltools';
|
|
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = 800;
|
|
canvas.height = 600;
|
|
document.body.appendChild(canvas);
|
|
|
|
const gl = instrumentGLContext(canvas.getContext('webgl'));
|
|
gl.clearColor(0, 0, 0, 1);
|
|
|
|
const positionBuffer = new Buffer(gl, new Float32Array([-0.5, -0.5, 0.5, -0.5, 0.0, 0.5]));
|
|
|
|
const colorBuffer = new Buffer(gl, new Float32Array([1.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 1.0]));
|
|
|
|
const vs = `
|
|
attribute vec2 position;
|
|
attribute vec3 color;
|
|
|
|
varying vec3 vColor;
|
|
|
|
void main() {
|
|
vColor = color;
|
|
gl_Position = vec4(position, 0.0, 1.0);
|
|
}
|
|
`;
|
|
|
|
const fs = `
|
|
varying vec3 vColor;
|
|
|
|
void main() {
|
|
gl_FragColor = vec4(vColor, 1.0);
|
|
}
|
|
`;
|
|
|
|
const model = new Model(gl, {
|
|
vs,
|
|
fs,
|
|
attributes: {
|
|
position: positionBuffer,
|
|
color: colorBuffer
|
|
},
|
|
vertexCount: 3
|
|
});
|
|
|
|
requestAnimationFrame(function draw() {
|
|
requestAnimationFrame(draw);
|
|
|
|
clear(gl, {color: [0, 0, 0, 1]});
|
|
model.draw();
|
|
});
|
|
```
|