Khmer Web: ជំហានដំបូង

WebGL គឺជាអក្សរកាត់មកពីពាក្យថា Web Graphics Library ដែលជាកញ្ចប់នៃក្បួនខ្នាតមានស្រាប់ទាំងឡាយសរសេរជាភាសា JavaScript ប្រើសំរាប់សរសេរកម្មវិធីគូរគំនូរត្រីមាត្រ (Three Dimensional Graphic) នៅលើ browser ។ មួយវិញទៀត កញ្ចប់នៃក្បួនខ្នាត WebGL នេះត្រូវបានបញ្ចូលរួចជាស្រេចទៅក្នុង browser មួយចំនួនធំមានដូចជា Chrome, Firefox, Safari ជាដើម។ ដូចនេះ ដើម្បីសរសេរកម្មវិធីជាភាសា JavaScript គូរគំនូរត្រីមាត្រនៅលើ browser យើងមិនចាំបាច់ត្រូវការអ្វីទាំងអស់។

យ៉ាងណាម៉ិញ ដើម្បីសំរួលការប្រើប្រាស់កញ្ចប់ក្បួនខ្នាត WebGL នេះអោយកាន់តែមានប្រសិទ្ធិភាព មានក្រុមហ៊ុននិងក្រុមអ្នកសរសេរកម្មវិធីគំនូរកំព្យូទ័រជាច្រើនបានបង្កើតនូវកញ្ចប់ក្បួនខ្នាតផ្សេងៗជាច្រើនទៀតរាប់មិនអស់ ដោយបញ្ចូលកញ្ចប់ WebGL ទៅក្នុងនោះរួចជាស្រេច ដូចជាកញ្ចប់ «babylon.js» ជាដើម។ ហើយតទៅនេះ យើងនឹងចាប់ផ្តើមរៀនសរសេរកម្មវិធីគូរគំនូរត្រីមាត្រនៅលើ browser ទាំងឡាយ ដោយប្រើប្រាស់កញ្ចប់ «babylon.js» នេះ។

ដំបូងបង្អស់ ដើម្បីអាចប្រើប្រាស់ក្បួនខ្នាតនៅក្នុងកញ្ចប់ babylon.js បាន យើងចាំបាច់ត្រូវទាញយកក្បួនខ្នាតទាំងនោះ បញ្ចូលទៅក្នុងប្លក់រប់សយើង ដោយសរសេរតំណរភ្ជាប់ដូចខាងក្រោមនេះនៅក្នុងធាតុ «head» នៅក្នុងប្លក់ template របស់យើង៖

<head>
  
  
  
</head>

បន្ទាប់មកទៀត យើងត្រូវបង្កើតផ្ទាំងគំនូរទទេស្អាតមួយ សំរាប់គូររូបត្រីមាត្រផ្សេងៗនៅលើនោះ ដោយប្រើធាតុ «canvas» ដូចខាងក្រោមនេះ៖

<canvas id="renderCanvas" style="width:100%;height:100%;touch-action:none;"></canvas>

ខាងក្រោមនេះ គឺជាឧទាហរណ៍នៃការសាកល្បងគូររូប sphere មួយនៅលើផ្ទាំងគំនូរមួយ។ យើងនឹងសិក្សាលំអិតពីការគូររូបផ្សេងៗ មួយម្តងៗនៅពេលខាងមុខនេះ។ ឥឡូវនេះ យើងគ្រាន់តែដឹងថា ដើម្បីគូររូបត្រីមាត្រនៅលើផ្ទាំងគំនូរណាមួយ យើងអាចធ្វើដូចខាងក្រោមនេះ៖

var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);

var createScene = function(){
  var scene = new BABYLON.Scene(engine);
  var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, new BABYLON.Vector3(0,0,5), scene);
  camera.attachControl(canvas, true);
  var light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 1, 0), scene);
  var light2 = new BABYLON.PointLight("light2", new BABYLON.Vector3(0, 1, -1), scene);
  var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter:2}, scene);
  return scene;
}

var scene = createScene();

engine.runRenderLoop(function(){ 
  scene.render();
});
window.addEventListener("resize", function(){ 
  engine.resize();
});