WebGLRenderingContext.blendFunc()

WebGL API 的WebGLRenderingContext.blendFunc() 方法定义了一个用于混合像素算法的函数.

语法

void gl.blendFunc(sfactor, dfactor);

参数

sfactor
 GLenum 为源混合因子指定一个乘数. 默认值是 gl.ONE. 有关可能的值, 查看下面.
dfactor
 GLenum 为源目标合因子指定一个乘数. 默认值是 gl.ZERO. 有关可能的值, 查看下面.

返回值

None.

异常

  • 如果 sfactor 或 dfactor 不是列出的可能值一直, 则抛出 gl.INVALID_ENUM 错误.
  • 如果使用恒定的颜色和恒定的alpha值作为源和目标因子, 则抛出gl.INVALID_ENUM 错误.

常量

下列常数可用于  sfactor 和dfactor.

混合颜色的公式可以这样描述: color(RGBA) = (sourceColor * sfactor) + (destinationColor * dfactor). RBGA 值在 0 到1 之间.

Constant Factor Description
gl.ZERO 0,0,0,0 所有颜色乘0.
gl.ONE 1,1,1,1 所有颜色乘1.
gl.SRC_COLOR RS, GS, BS, AS 将所有颜色乘上源颜色.
gl.ONE_MINUS_SRC_COLOR 1-RS, 1-GS, 1-BS, 1-AS 每个源颜色所有颜色乘1 .
gl.DST_COLOR RD, GD, BD, AD 将所有颜色与目标颜色相乘.
gl.ONE_MINUS_DST_COLOR 1-RD, 1-GD, 1-BD, 1-AD 将所有颜色乘以1减去每个目标颜色.
gl.SRC_ALPHA AS, AS, AS, AS 将所有颜色乘以源alpha值.
gl.ONE_MINUS_SRC_ALPHA 1-AS, 1-AS, 1-AS, 1-AS 将所有颜色乘以1 减去源alpha值.
gl.DST_ALPHA AD, AD, AD, AD 将所有颜色与目标alpha值相乘.
gl.ONE_MINUS_DST_ALPHA 1-AD, 1-AD, 1-AD, 1-AD 将所有颜色乘以1减去目标alpha值.
gl.CONSTANT_COLOR RC, GC, BC, AC 将所有颜色乘以一个常数颜色.
gl.ONE_MINUS_CONSTANT_COLOR 1-RC, 1-GC, 1-BC, 1-AC 所有颜色乘以1减去一个常数颜色.
gl.CONSTANT_ALPHA AC, AC, AC, AC 将所有颜色乘以一个常数.
gl.ONE_MINUS_CONSTANT_ALPHA 1-AC, 1-AC, 1-AC, 1-AC 所有颜色乘以1减去一个常数.
gl.SRC_ALPHA_SATURATE

min(AS, 1 - AD), min(AS, 1 - AD), min(AS, 1 - AD), 1

 将RGB颜色乘以源alpha值或1减去目标alpha值中的较小值。alpha值乘以1.

示例

使用混合函数, 您首先必须使用参数 gl.BLEND来激活WebGLRenderingContext.enable() 的混合.

gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_COLOR, gl.DST_COLOR);

要获得当前的混合函数, 查询BLEND_SRC_RGB, BLEND_SRC_ALPHA, BLEND_DST_RGB, 和BLEND_DST_ALPHA 常量中返回混合函数常量.

gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_COLOR, gl.DST_COLOR);
gl.getParameter(gl.BLEND_SRC_RGB) == gl.SRC_COLOR;
// true

说明

Specification Status Comment
WebGL 1.0
blendFunc		 Recommendation Initial definition.
In WebGL, constant color and constant alpha cannot be used together as source and destination factors in the blend function. See section 6.13. of the specification.
OpenGL ES 2.0
glBlendFunc		 Standard Man page of the OpenGL API.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
blendFuncChrome Full support 9Edge Full support 12Firefox Full support 4IE Full support 11Opera Full support 12Safari Full support 5.1WebView Android Full support YesChrome Android Full support 25Firefox Android Full support YesOpera Android Full support 12Safari iOS Full support 8Samsung Internet Android Full support Yes

Legend

Full support  
Full support

另见

相关主题
  1. WebGL API
  2. WebGLRenderingContext
  3. 属性
    1. canvas
    2. drawingBufferHeight
    3. drawingBufferWidth
  4. 方法
    1. activeTexture()
    2. attachShader()
    3. bindAttribLocation()
    4. bindBuffer()
    5. bindFramebuffer()
    6. bindRenderbuffer()
    7. bindTexture()
    8. blendColor()
    9. blendEquation()
    10. blendEquationSeparate()
    11. blendFunc()
    12. blendFuncSeparate() [我来译!]
    13. bufferData()
    14. bufferSubData() [我来译!]
    15. checkFramebufferStatus() [我来译!]
    16. clear()
    17. clearColor()
    18. clearDepth()
    19. clearStencil() [我来译!]
    20. colorMask() [我来译!]
    21. commit()
    22. compileShader()
    23. compressedTexImage[23]D()
    24. compressedTexSubImage2D() [我来译!]
    25. copyTexImage2D() [我来译!]
    26. copyTexSubImage2D() [我来译!]
    27. createBuffer()
    28. createFramebuffer()
    29. createProgram()
    30. createRenderbuffer()
    31. createShader()
    32. createTexture()
    33. cullFace() [我来译!]
    34. deleteBuffer()
    35. deleteFramebuffer()
    36. deleteProgram()
    37. deleteRenderbuffer()
    38. deleteShader()
    39. deleteTexture()
    40. depthFunc()
    41. depthMask()
    42. depthRange() [我来译!]
    43. detachShader()
    44. disable()
    45. disableVertexAttribArray() [我来译!]
    46. drawArrays()
    47. drawElements()
    48. enable()
    49. enableVertexAttribArray()
    50. finish() [我来译!]
    51. flush() [我来译!]
    52. framebufferRenderbuffer() [我来译!]
    53. framebufferTexture2D() [我来译!]
    54. frontFace() [我来译!]
    55. generateMipmap() [我来译!]
    56. getActiveAttrib() [我来译!]
    57. getActiveUniform()
    58. getAttachedShaders() [我来译!]
    59. getAttribLocation()
    60. getBufferParameter() [我来译!]
    61. getContextAttributes()
    62. getError() [我来译!]
    63. getExtension()
    64. getFramebufferAttachmentParameter() [我来译!]
    65. getParameter()
    66. getProgramInfoLog()
    67. getProgramParameter()
    68. getRenderbufferParameter() [我来译!]
    69. getShaderInfoLog() [我来译!]
    70. getShaderParameter()
    71. getShaderPrecisionFormat() [我来译!]
    72. getShaderSource()
    73. getSupportedExtensions()
    74. getTexParameter()
    75. getUniform()
    76. getUniformLocation() [我来译!]
    77. getVertexAttrib() [我来译!]
    78. getVertexAttribOffset() [我来译!]
    79. hint() [我来译!]
    80. isBuffer()
    81. isContextLost()
    82. isEnabled()
    83. isFramebuffer() [我来译!]
    84. isProgram()
    85. isRenderbuffer() [我来译!]
    86. isShader()
    87. isTexture() [我来译!]
    88. lineWidth() [我来译!]
    89. linkProgram()
    90. pixelStorei()
    91. polygonOffset()
    92. readPixels() [我来译!]
    93. renderbufferStorage()
    94. sampleCoverage() [我来译!]
    95. scissor() [我来译!]
    96. shaderSource()
    97. stencilFunc() [我来译!]
    98. stencilFuncSeparate() [我来译!]
    99. stencilMask() [我来译!]
    100. stencilMaskSeparate() [我来译!]
    101. stencilOp() [我来译!]
    102. stencilOpSeparate() [我来译!]
    103. texImage2D()
    104. texParameter[fi]()
    105. texSubImage2D() [我来译!]
    106. uniform[1234][fi][v]()
    107. uniformMatrix[234]fv()
    108. useProgram()
    109. validateProgram()
    110. vertexAttrib[1234]f[v]()
    111. vertexAttribPointer()
    112. viewport()
  5. Related pages for WebGL
    1. ANGLE_instanced_arrays
    2. EXT_blend_minmax
    3. EXT_color_buffer_half_float
    4. EXT_disjoint_timer_query
    5. EXT_frag_depth
    6. EXT_sRGB
    7. EXT_shader_texture_lod
    8. EXT_texture_filter_anisotropic
    9. OES_element_index_uint
    10. OES_standard_derivatives
    11. OES_texture_float
    12. OES_texture_float_linear
    13. OES_texture_half_float
    14. OES_texture_half_float_linear
    15. OES_vertex_array_object
    16. WEBGL_color_buffer_float
    17. WEBGL_compressed_texture_atc
    18. WEBGL_compressed_texture_etc1
    19. WEBGL_compressed_texture_pvrtc
    20. WEBGL_compressed_texture_s3tc
    21. WEBGL_compressed_texture_s3tc_srgb
    22. WEBGL_debug_renderer_info
    23. WEBGL_debug_shaders
    24. WEBGL_depth_texture
    25. WEBGL_draw_buffers
    26. WEBGL_lose_context
    27. WebGL2RenderingContext
    28. WebGLActiveInfo
    29. WebGLBuffer
    30. WebGLContextEvent
    31. WebGLFramebuffer
    32. WebGLObject
    33. WebGLProgram
    34. WebGLQuery
    35. WebGLRenderbuffer
    36. WebGLSampler
    37. WebGLShader
    38. WebGLShaderPrecisionFormat
    39. WebGLSync
    40. WebGLTexture
    41. WebGLTransformFeedback
    42. WebGLUniformLocation
    43. WebGLVertexArrayObject