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
|
---
title: EXT_float_blend
slug: Web/API/EXT_float_blend
tags:
- API
- WebGL
- 参考
- 浮点
translation_of: Web/API/EXT_float_blend
---
<div>{{APIRef("WebGL")}}</div>
<p><span class="seoSummary"><a href="/zh-CN/docs/Web/API/WebGL_API">WebGL API</a> 的 <code>EXT_float_blend</code> 扩展允许使用 32 位浮点数组件来混合和绘制缓冲区。</span></p>
<p>若要查询该扩展是否存在，可以用方法：{{domxref("WebGLRenderingContext.getExtension()")}}。更多信息可以参考 <a href="/en-US/docs/Web/API/WebGL_API/Tutorial">WebGL tutorial</a> 中的 <a href="/zh-CN/docs/Web/API/WebGL_API/Using_Extensions">Using Extensions</a>。</p>
<div class="note">
<p><strong>可用性：</strong>该扩展在 {{domxref("WebGLRenderingContext", "WebGL1")}} 和{{domxref("WebGL2RenderingContext", "WebGL2")}} 上下文中均存在。但是，要使用它，你需要启用对32位浮点绘制缓冲区的使用{{domxref("WEBGL_color_buffer_float")}}（for WebGL1）或 {{domxref("EXT_color_buffer_float")}}（WebGL2）。通过启用32位浮点缓冲区扩展，将自动启用<code>EXT_float_blend</code>。</p>
</div>
<p>该组件启用后， 使用 32 位浮点数混合方式绘制，调用 {{domxref("WebGLRenderingContext.drawArrays", "drawArrays()")}} 或 {{domxref("WebGLRenderingContext.drawElements", "drawElements()")}} 时，将不再产生 <code>INVALID_OPERATION</code> 异常。</p>
<h2 id="使用说明">使用说明</h2>
<p>在支持 <code>EXT_float_blend</code> 扩展的设备上, 当以下几种有一种或几种扩展启用时{{domxref("EXT_color_buffer_float")}}, {{domxref("OES_texture_float")}}, 或 {{domxref("WEBGL_color_buffer_float")}}，该扩展将会自动、隐式的启用。 这确保了在该扩展定义之前的内容也都能够按照预期正确执行。</p>
<h2 id="例子">例子</h2>
<pre class="brush:js">const gl = canvas.getContext('webgl2');
// enable necessary extensions
gl.getExtension('EXT_color_buffer_float');
gl.getExtension('EXT_float_blend');
const tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
// use floating point format
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32F, 1, 1, 0, gl.RGBA, gl.FLOAT, null);
const fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
// enable blending
gl.enable(gl.BLEND);
gl.drawArrays(gl.POINTS, 0, 1);
// won't throw gl.INVALID_OPERATION with the extension enabled
</pre>
<h2 id="规范">规范</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
</tr>
<tr>
<td><a href="https://www.khronos.org/registry/webgl/extensions/EXT_float_blend/">EXT_float_blend</a></td>
<td>Draft</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("api.EXT_float_blend")}}</p>
<h2 id="其它参考">其它参考</h2>
<ul>
<li><a href="/zh-CN/docs/Web/API/WebGL_API">WebGL API</a></li>
<li><a href="/zh-CN/docs/Web/API/WebGL_API/Using_Extensions">Using WebGL extensions</a></li>
<li><a href="/zh-CN/docs/Web/API/WebGL_API/Tutorial">WebGL 教程</a></li>
<li>{{domxref("WebGLRenderingContext.getExtension()")}}</li>
<li>{{domxref("EXT_color_buffer_float")}}</li>
<li>{{domxref("WEBGL_color_buffer_float")}}</li>
<li>{{domxref("WebGLRenderingContext.drawArrays()")}}</li>
<li>{{domxref("WebGLRenderingContext.drawElements()")}}</li>
</ul>
|
