Cinevva

हिन्दी

English
简体中文
한국어

हिन्दी

English
简体中文
한국어

थीम

गेम डेवलपर्स के लिए WebGL की बुनियादी बातें ​

WebGL आपको browser में सीधे GPU तक पहुंच देता है. यह 3D (और तेज़ चलने वाले 2D) वेब गेम की नींव है. यह tutorial ज़रूरी बातें कवर करता है.

1) WebGL context पाना ​

js
const canvas = document.getElementById('game')
const gl = canvas.getContext('webgl2') || canvas.getContext('webgl')

if (!gl) {
  // Fallback or error message
  console.error('WebGL not supported')
}

जब उपलब्ध हो तो webgl2 को प्राथमिकता दें. यह व्यापक रूप से सपोर्टेड है और बेहतर फ़ीचर देता है.

2) render pipeline (सरल रूप में) ​

  1. Vertex shader हर vertex पर एक बार चलता है. यह आपकी geometry को पोज़िशन करता है.
  2. Fragment shader हर pixel पर एक बार चलता है. यह आउटपुट को रंग देता है.
  3. Buffers डेटा रखते हैं (positions, UVs, colors).
  4. Textures वे images हैं जिन्हें shaders sample करते हैं.

3) एक न्यूनतम shader जोड़ा ​

Vertex shader:

glsl
#version 300 es
in vec2 a_position;
void main() {
  gl_Position = vec4(a_position, 0.0, 1.0);
}

Fragment shader:

glsl
#version 300 es
precision mediump float;
out vec4 fragColor;
void main() {
  fragColor = vec4(1.0, 0.5, 0.2, 1.0); // orange
}

4) shaders को compile और link करना ​

js
function createShader(gl, type, source) {
  const shader = gl.createShader(type)
  gl.shaderSource(shader, source)
  gl.compileShader(shader)
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    console.error(gl.getShaderInfoLog(shader))
    gl.deleteShader(shader)
    return null
  }
  return shader
}

function createProgram(gl, vs, fs) {
  const program = gl.createProgram()
  gl.attachShader(program, vs)
  gl.attachShader(program, fs)
  gl.linkProgram(program)
  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    console.error(gl.getProgramInfoLog(program))
    return null
  }
  return program
}

5) buffers बनाना ​

js
const positions = new Float32Array([
  -0.5, -0.5,
   0.5, -0.5,
   0.0,  0.5,
])

const buffer = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW)

6) buffers को shaders से जोड़ना ​

js
const positionLoc = gl.getAttribLocation(program, 'a_position')
gl.enableVertexAttribArray(positionLoc)
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0)

7) गेम loop ​

js
function render() {
  gl.viewport(0, 0, canvas.width, canvas.height)
  gl.clearColor(0, 0, 0, 1)
  gl.clear(gl.COLOR_BUFFER_BIT)

  gl.useProgram(program)
  gl.drawArrays(gl.TRIANGLES, 0, 3)

  requestAnimationFrame(render)
}
render()

8) textures लोड करना ​

js
function loadTexture(gl, url) {
  const texture = gl.createTexture()
  gl.bindTexture(gl.TEXTURE_2D, texture)

  // Placeholder pixel until image loads
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE,
    new Uint8Array([255, 0, 255, 255]))

  const img = new Image()
  img.onload = () => {
    gl.bindTexture(gl.TEXTURE_2D, texture)
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img)
    gl.generateMipmap(gl.TEXTURE_2D)
  }
  img.src = url
  return texture
}

9) आम गलतियां ​

  • Power-of-two textures WebGL 2 में सख़्ती से ज़रूरी नहीं हैं, लेकिन इनके साथ mipmaps बेहतर काम करते हैं.
  • Lost context: webglcontextlost events को संभालें. मेमोरी का दबाव होने पर mobile browsers context हटा देते हैं.
  • Float textures के लिए extension जांच ज़रूरी है (EXT_color_buffer_float).

10) library कब इस्तेमाल करें ​

रॉ WebGL काफ़ी लंबा-चौड़ा है. ज़्यादातर गेम के लिए इन पर विचार करें:

  • Three.js — पूरी सुविधाओं वाला 3D
  • PixiJS — तेज़ 2D rendering
  • PlayCanvas — editor वाला गेम engine

रॉ WebGL तब इस्तेमाल करें जब आपको चाहिए:

  • अधिकतम नियंत्रण
  • एक custom renderer
  • यह सीखना कि चीज़ें असल में कैसे काम करती हैं

2026 के लिए एक बात: WebGPU अब हर बड़े browser में डिफ़ॉल्ट रूप से आता है (Chrome और Edge 113 से, Windows पर Firefox 141 और macOS पर 145, और iOS 26, iPadOS 26 तथा macOS Tahoe 26 पर Safari). यहां दी गई बुनियादी बातें अब भी लागू होती हैं, क्योंकि Three.js जैसी libraries अपना WebGPU renderer एक अपने-आप होने वाले WebGL 2 fallback के साथ चलाती हैं, इसलिए WebGL 2 भरोसेमंद बेसलाइन बना रहता है. अगर आप आज नए सिरे से एक renderer शुरू कर रहे हैं, तो किसी API पर तय होने से पहले इसके साथ-साथ WebGPU tutorial भी पढ़ें.

संबंधित ​

बाहरी संसाधन ​