Skip to content

Commit

Permalink
feat(patch): support renderer extensions option
Browse files Browse the repository at this point in the history
  • Loading branch information
@sakitam-fdd
sakitam-fdd committed Mar 13, 2023
1 parent 0854826 commit c312699
Show file tree
Hide file tree
Showing 2 changed files with 140 additions and 5 deletions.
21 changes: 18 additions & 3 deletions src/core/RenderTarget.ts
View file
Expand Up @@ -185,7 +185,10 @@ export default class RenderTarget extends Resource<RenderTargetOptions> {
}
if (
options.depthTexture &&
(renderer.isWebGL2 || renderer.gl.getExtension('WEBGL_depth_texture'))
(renderer.isWebGL2 ||
// 此扩展仅适用于WebGL1上下文。在WebGL2 中，此扩展的功能默认在 WebGL2 上下文中可用。WebGL2 中的常量是 gl.UNSIGNED_INT_24_8
// @link https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_depth_texture
(!renderer.isWebGL2 && renderer.gl.getExtension('WEBGL_depth_texture')))
) {
const texture = new Texture(renderer, {
width: this.width,
Expand Down Expand Up @@ -296,8 +299,20 @@ export default class RenderTarget extends Resource<RenderTargetOptions> {
this.#clearColors[i] = [0, 0, 0, 0];
}

if (this.options.color! > 1 && this.renderer.isWebGL2) {
(this.gl as WebGL2RenderingContext).drawBuffers(this.drawBuffers);
if (this.options.color! > 1) {
// @link https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_draw_buffers#browser_compatibility 兼容性不好
if (this.renderer.isWebGL2) {
(this.gl as WebGL2RenderingContext).drawBuffers(this.drawBuffers);
} else {
const ext = this.renderer.extension('WEBGL_draw_buffers') as WEBGL_draw_buffers;
if (ext && ext.drawBuffersWEBGL) {
ext.drawBuffersWEBGL(this.drawBuffers);
} else {
throw new Error(
'Please open the corresponding extension [WEBGL_draw_buffers](https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_draw_buffers#browser_compatibility) and check whether the browser supports it',
);
}
}
}

this.drawBuffersChanged = true;
Expand Down
124 changes: 122 additions & 2 deletions src/core/Renderer.ts
View file
Expand Up @@ -4,8 +4,72 @@ import Scene from '../objects/Scene';
import { isWebGL, isWebGL2, getContext } from '../utils';
import type { WithNull, WithUndef } from '../types';

type ExtensionKeys = 'ANGLE_instanced_arrays' | 'OES_vertex_array_object';
type Extensions = ANGLE_instanced_arrays | OES_vertex_array_object;
const innerExtensionKeys = [
'ANGLE_instanced_arrays', // 实例化绘制
'OES_vertex_array_object', // 顶点数组对象
] as const;

type InnerExtensionKeys = typeof innerExtensionKeys[number];

/**
* 仅在 webgl 1 中使用的扩展，webgl2 直接支持
*/
const external1ExtensionKeys = [
'WEBGL_depth_texture', // 深度纹理
'OES_texture_half_float', // 半浮点型纹理
'OES_texture_float', // 浮点型纹理
'OES_standard_derivatives', // 标准导数
'OES_element_index_uint', // UNSIGNED_INT索引
'EXT_frag_depth', // 设置gl_FragDepth
'EXT_blend_minmax', // 混合公式MIN/MAX
'EXT_shader_texture_lod', // 直接纹理LOD获取
'WEBGL_draw_buffers', // 多种绘制缓冲
'WEBGL_color_buffer_float', // 32 位浮点数颜色缓冲区
] as const;

/**
* 仅在 webgl 2 中支持的扩展
*/
const external2ExtensionKeys = [
'EXT_color_buffer_float', // 32 位浮点数颜色缓冲区
] as const;

/**
* 在 webgl1 和 webgl2 都支持的扩展
*/
const external12ExtensionKeys = [
'WEBGL_lose_context', // 模拟丢失和恢复 gl 上下文
'OES_texture_half_float_linear', // 半浮点型纹理线性过滤
'OES_texture_float_linear', // 浮点型纹理线性过滤
'EXT_color_buffer_half_float', // 半（16 位）浮点数颜色缓冲区
'WEBGL_debug_renderer_info', // 图形驱动信息
] as const;

type External1ExtensionKeys = typeof external1ExtensionKeys[number];
type External2ExtensionKeys = typeof external2ExtensionKeys[number];
type External12ExtensionKeys = typeof external12ExtensionKeys[number];

type ExternalExtensionKeys =
| External1ExtensionKeys
| External2ExtensionKeys
| External12ExtensionKeys;

type ExtensionKeys = InnerExtensionKeys | ExternalExtensionKeys;

type Extensions =
| ANGLE_instanced_arrays
| OES_vertex_array_object
| WEBGL_depth_texture
| OES_texture_half_float
| OES_texture_float
| OES_texture_half_float_linear
| OES_texture_float_linear
| OES_standard_derivatives
| OES_element_index_uint
| EXT_frag_depth
| EXT_blend_minmax
| EXT_shader_texture_lod
| WEBGL_draw_buffers;

export interface RendererOptions {
/**
Expand Down Expand Up @@ -61,6 +125,11 @@ export interface RendererOptions {
* 是否开启视锥剔除，默认不开启
*/
frustumCull: boolean;

/**
* WebGL 上下文支持的扩展列表。默认 []
*/
extensions: ExternalExtensionKeys[];
}

export interface RenderParams {
Expand Down Expand Up @@ -170,6 +239,7 @@ export default class Renderer {
premultipliedAlpha: false,
preserveDrawingBuffer: false,
requestWebGl2: true,
extensions: [],
},
opts,
);
Expand Down Expand Up @@ -269,6 +339,41 @@ export default class Renderer {
'deleteVertexArray',
'deleteVertexArrayOES',
);

if (options.extensions) {
options.extensions
.filter(
(extension: ExternalExtensionKeys) =>
external1ExtensionKeys.findIndex((ext) => ext === extension) > -1,
)
.forEach((extension: ExternalExtensionKeys) => {
if (!this.#extensions[extension] && !this.isWebGL2) {
this.#extensions[extension] = this.gl.getExtension(extension);
}
});

options.extensions
.filter(
(extension: ExternalExtensionKeys) =>
external2ExtensionKeys.findIndex((ext) => ext === extension) > -1,
)
.forEach((extension: ExternalExtensionKeys) => {
if (!this.#extensions[extension] && this.isWebGL2) {
this.#extensions[extension] = this.gl.getExtension(extension);
}
});

options.extensions
.filter(
(extension: ExternalExtensionKeys) =>
external12ExtensionKeys.findIndex((ext) => ext === extension) > -1,
)
.forEach((extension: ExternalExtensionKeys) => {
if (!this.#extensions[extension]) {
this.#extensions[extension] = this.gl.getExtension(extension);
}
});
}
}

/**
Expand Down Expand Up @@ -318,6 +423,21 @@ export default class Renderer {
return isWebGL2(this.gl);
}

/**
* 获取已开启的扩展
*/
get extensions() {
return this.#extensions;
}

/**
* 获取指定的扩展
* @param key
*/
extension(key: ExtensionKeys) {
return this.#extensions[key];
}

/**
* 获取 canvas 画布大小
*/
Expand Down

0 comments on commit c312699

Please sign in to comment.