← 返回首页
WebGLRenderingContext: bufferData() メソッド - Web API | MDN
HTML

HTML: Markup language

HTML reference HTML guides Markup languages
CSS

CSS: Styling language

CSS reference CSS guides Layout cookbook
JavaScriptJS

JavaScript: Scripting language

JS reference JS guides
Web APIs

Web APIs: Programming interfaces

Web API reference Web API guides
All

All web technology

Technologies Topics
Learn

Learn web development

Frontend developer course Learn HTML Learn CSS Learn JavaScript
Tools

Discover our tools

About

Get to know MDN better

Blog
Toggle sidebar
  1. 開発者向けのウェブ技術
  2. Web API
  3. WebGLRenderingContext
  4. bufferData()
Theme
  • OS default
  • Light
  • Dark
日本語
Remember language Learn more

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

WebGLRenderingContext: bufferData() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

WebGLRenderingContext.bufferData() は WebGL API のメソッドで、バッファーオブジェクトのデータストアを初期化、作成します。

In this article

構文

js
// WebGL1 bufferData(target, usage) bufferData(target, size, usage) bufferData(target, srcData, usage) // WebGL2 bufferData(target, usage, srcOffset) bufferData(target, srcData, usage, srcOffset) bufferData(target, srcData, usage, srcOffset, length)

引数

target

GLenum で、結合する場所（ターゲット）を指定します。以下の値を取ることができます。

gl.ARRAY_BUFFER

頂点の属性を含むバッファーで、頂点座標、テクスチャ座標データや、頂点色データのようなものです。

gl.ELEMENT_ARRAY_BUFFER

要素の位置指定に使われるバッファーです。

WebGL 2 のコンテキストを使用している場合は、更に以下の値を利用することができます。

gl.COPY_READ_BUFFER

バッファーオブジェクトを他へコピーするためのバッファーです。

gl.COPY_WRITE_BUFFER

バッファーオブジェクトを他へコピーするためのバッファーです。

gl.TRANSFORM_FEEDBACK_BUFFER

書き戻し操作を変換するバッファーです。

gl.UNIFORM_BUFFER

ユニフォームブロックの格納に使われるバッファーです。

gl.PIXEL_PACK_BUFFER

ピクセル移動操作に使われるバッファーです。

gl.PIXEL_UNPACK_BUFFER

ピクセル移動操作に使われるバッファーです。

size

GLsizeiptr で、バッファーオブジェクトのデータストアのサイズを設定します。

srcData 省略可

ArrayBuffer, SharedArrayBuffer, TypedArray, DataView のいずれかで、データストアへ格納されます。 null にした場合、データストアは作成されますが、内容は初期化されず未定義です。

usage

GLenum で、データストアの最適化目的での用途を指定します。以下の値を取ることができます。

  • gl.STATIC_DRAW
    • : 内容は、アプリケーションによって一度に指定され、 WebGL 描画および画像指定コマンドのソースとして何度も使用されることを意図しています。
  • gl.DYNAMIC_DRAW
    • : 内容は、アプリケーションによって繰り返し再指定され、 WebGL 描画コマンドや画像指定コマンドのソースとして何度も使用されることを意図しています。
  • gl.STREAM_DRAW
    • : この内容は、アプリケーションによって一度だけ指定され、 WebGL 描画および画像指定コマンドのソースとして多くても数回使用されることを意図しています。
  • WebGL 2 コンテキストを使用している場合、さらに以下の値を取ることができます。 gl.STATIC_READ

    内容は、 WebGLからデータを読み込んで一度に指定し、アプリケーションから何度も問い合わせることを想定しています。

    gl.DYNAMIC_READ

    内容は、 WebGL からデータを読み込むことによって繰り返し再定義され、アプリケーションによって何度も照会されることを意図しています。

    gl.STREAM_READ

    内容は、 WebGL からデータを読み込んで一度に指定し、アプリケーションから最大数回問い合わせることを想定しています。

    gl.STATIC_COPY

    このコンテンツは、 WebGL からデータを読み込んで一度だけ指定し、 WebGL の描画や画像指定コマンドのソースとして何度も使用することを意図しています。

    gl.DYNAMIC_COPY

    このコンテンツは、 WebGL からデータを読み込むことで繰り返し再指定され、 WebGL の描画コマンドや画像指定コマンドのソースとして何度も使用されることを意図しています。

    gl.STREAM_COPY

    内容は WebGL からデータを読み込んで一度指定し、 WebGL の描画コマンドや画像指定コマンドのソースとしてせいぜい数回使うことを想定しています。

srcOffset

GLuint で、バッファー読み出しを開始する要素の位置のオフセットを指定します。

length 省略可

GLuint で、既定値は 0 です。

返値

なし (undefined)。

例外

  • 与えられた size でデータストアを作成できない場合、gl.OUT_OF_MEMORY エラーが発生します。
  • size が負数の場合、gl.INVALID_VALUE エラーが発生します。
  • target や usage が許可された列挙のものでない場合、gl.INVALID_ENUM エラーが発生します。

例

bufferData の使用

js
const canvas = document.getElementById("canvas"); const gl = canvas.getContext("webgl"); const buffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buffer); gl.bufferData(gl.ARRAY_BUFFER, 1024, gl.STATIC_DRAW);

バッファー情報の取得

現在のバッファーの用途やサイズを確認するには、 WebGLRenderingContext.getBufferParameter() メソッドを使用してください。

js
gl.getBufferParameter(gl.ARRAY_BUFFER, gl.BUFFER_SIZE); gl.getBufferParameter(gl.ARRAY_BUFFER, gl.BUFFER_USAGE);

型付き配列のサイズの取得

型付き配列のサイズ引数を計算します。

js
const dataArray = new Float32Array([1, 2, 3, 4]); const sizeInBytes = dataArray.length * dataArray.BYTES_PER_ELEMENT;

仕様書

Specification
WebGL Specification
# 5.14.5

ブラウザーの互換性

Enable JavaScript to view this browser compatibility table.

関連情報

Help improve MDN

Was this page helpful to you?
Yes No
Learn how to contribute

This page was last modified on 2025年6月24日 by MDN contributors.

View this page on GitHub • Report a problem with this content
  1. WebGL: ウェブの 2D および 3D グラフィック
  2. WebGLRenderingContext
  3. インスタンスプロパティ
    1. canvas
    2. drawingBufferColorSpace
    3. drawingBufferHeight
    4. drawingBufferWidth
    5. unpackColorSpace
  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. compileShader()
    22. compressedTexImage2D()
    23. compressedTexSubImage2D()
    24. copyTexImage2D()
    25. copyTexSubImage2D()
    26. createBuffer()
    27. createFramebuffer()
    28. createProgram()
    29. createRenderbuffer()
    30. createShader()
    31. createTexture()
    32. cullFace()
    33. deleteBuffer()
    34. deleteFramebuffer()
    35. deleteProgram()
    36. deleteRenderbuffer()
    37. deleteShader()
    38. deleteTexture()
    39. depthFunc()
    40. depthMask()
    41. depthRange()
    42. detachShader()
    43. disable()
    44. disableVertexAttribArray()
    45. drawArrays()
    46. drawElements()
    47. enable()
    48. enableVertexAttribArray()
    49. finish()
    50. flush()
    51. framebufferRenderbuffer()
    52. framebufferTexture2D()
    53. frontFace()
    54. generateMipmap()
    55. getActiveAttrib()
    56. getActiveUniform()
    57. getAttachedShaders()
    58. getAttribLocation()
    59. getBufferParameter()
    60. getContextAttributes()
    61. getError()
    62. getExtension()
    63. getFramebufferAttachmentParameter()
    64. getParameter()
    65. getProgramInfoLog()
    66. getProgramParameter()
    67. getRenderbufferParameter()
    68. getShaderInfoLog()
    69. getShaderParameter()
    70. getShaderPrecisionFormat()
    71. getShaderSource()
    72. getSupportedExtensions()
    73. getTexParameter()
    74. getUniform()
    75. getUniformLocation()
    76. getVertexAttrib()
    77. getVertexAttribOffset()
    78. hint()
    79. isBuffer()
    80. isContextLost()
    81. isEnabled()
    82. isFramebuffer()
    83. isProgram()
    84. isRenderbuffer()
    85. isShader()
    86. isTexture()
    87. lineWidth()
    88. linkProgram()
    89. makeXRCompatible()
    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. 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_draw_buffers_indexed
    10. OES_element_index_uint
    11. OES_standard_derivatives
    12. OES_texture_float
    13. OES_texture_float_linear
    14. OES_texture_half_float
    15. OES_texture_half_float_linear
    16. OES_vertex_array_object
    17. WEBGL_color_buffer_float
    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
  6. ガイド
    1. WebGL の定数
    2. WebGL の型
    3. WebGL のモデル、ビュー、投影
    4. WebGL best practices
    5. 実例による WebGL
    6. 基本的な 2D WebGL アニメーションの例
    7. Compressed texture formats
    8. WebGL のデータ
    9. ウェブの行列計算
    10. WebGL 拡張機能の使用
  7. チュートリアル
    1. WebGL チュートリアル
    2. WebGL 入門
    3. WebGL コンテキストへの 2D コンテンツの追加
    4. シェーダーを用いた WebGL での色の指定
    5. WebGL でのオブジェクトのアニメーション
    6. WebGL を用いた 3D オブジェクトの作成
    7. WebGL でのテクスチャの使用
    8. WebGL でのライティング
    9. WebGL におけるテクスチャのアニメーション

Your blueprint for a better internet.

MDN Contribute Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998–2026 by individual mozilla.org contributors. Content available under a Creative Commons license.