/
customCanvas.ts
88 lines (74 loc) · 3.4 KB
/
customCanvas.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
/**
* @author Yannick Deubel (https://github.com/yandeu)
* @copyright Copyright (c) 2020 Yannick Deubel; Project Url: https://github.com/enable3d/enable3d
* @license {@link https://github.com/enable3d/enable3d/blob/master/LICENSE|GNU GPLv3}
*/
// copied from https://phaser.io/examples/v3/view/game-config/custom-webgl-canvas
// copied from https://github.com/mrdoob/three.js/blob/dev/src/renderers/WebGLRenderer.js
import { WEBGL } from '@enable3d/three-wrapper/dist/index'
interface CustomCanvasConfig {
antialias?: boolean
parent?: string
canvasId?: string
}
/**
* The WebGL context created by Phaser does not meed the requirements of three.js.
* So we create a custom canvas and merge the default contextAttributes from three.js into Phaser’s default contextAttributes.
*/
const customCanvas = (
customCanvasConfig: CustomCanvasConfig = {}
): { canvas: HTMLCanvasElement; context: CanvasRenderingContext2D } => {
const { antialias = false, parent: p = undefined, canvasId = 'myCustomCanvas' } = customCanvasConfig
// create canvas
const myCustomCanvas: any = document.createElementNS('http://www.w3.org/1999/xhtml', 'canvas')
myCustomCanvas.id = canvasId
const parent = p ? document.getElementById(p) : document.body
if (parent) parent.appendChild(myCustomCanvas)
else console.error(`[enable3d] parent "${p}" not found!`)
const parameters: any = { antialias }
// https://github.com/mrdoob/three.js/blob/9549909d9c631aaa20d81c2fec863a470fa2e3f0/src/renderers/WebGLRenderer.js#L58
const _alpha = parameters.alpha !== undefined ? parameters.alpha : false
const _depth = parameters.depth !== undefined ? parameters.depth : true
const _stencil = parameters.stencil !== undefined ? parameters.stencil : true
const _antialias = parameters.antialias !== undefined ? parameters.antialias : false
const _premultipliedAlpha = parameters.premultipliedAlpha !== undefined ? parameters.premultipliedAlpha : true
const _preserveDrawingBuffer =
parameters.preserveDrawingBuffer !== undefined ? parameters.preserveDrawingBuffer : false
const _powerPreference = parameters.powerPreference !== undefined ? parameters.powerPreference : 'default'
const _failIfMajorPerformanceCaveat =
parameters.failIfMajorPerformanceCaveat !== undefined ? parameters.failIfMajorPerformanceCaveat : false
// threejs's context attributes
// https://github.com/mrdoob/three.js/blob/9549909d9c631aaa20d81c2fec863a470fa2e3f0/src/renderers/WebGLRenderer.js#L192
const contextAttributes = {
alpha: _alpha,
depth: _depth,
stencil: _stencil,
antialias: _antialias,
premultipliedAlpha: _premultipliedAlpha,
preserveDrawingBuffer: _preserveDrawingBuffer,
powerPreference: _powerPreference,
failIfMajorPerformanceCaveat: _failIfMajorPerformanceCaveat,
xrCompatible: true
}
// default context config for phaser
const contextCreationConfig = {
alpha: false,
depth: false,
antialias: true,
premultipliedAlpha: true,
stencil: true,
preserveDrawingBuffer: false,
failIfMajorPerformanceCaveat: false,
powerPreference: 'default',
// merge bots context attributes
...contextAttributes
}
const webgl = WEBGL.isWebGL2Available() ? 'webgl2' : 'webgl'
// create context
const myCustomContext: any = myCustomCanvas.getContext(webgl, contextCreationConfig)
return {
canvas: myCustomCanvas,
context: myCustomContext
}
}
export default customCanvas