Babylon.js

saalek110

saalek110

Well-Known Member
این صفحه سایت فقط همین یک سورس را داشت.

حالا فکر کنید ، چه بازیهایی میشه با این توپهای برخورد کننده ساخت.
 
saalek110

saalek110

Well-Known Member


Playing Sounds and Music​


JavaScript: 
<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Basic Scene- Playing sounds and music</title>
 
      <style>
         canvas {width: 100%; height: 100%;}
      </style>
          <script src="https://cdn.babylonjs.com/babylon.js"></script>
              <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
                  <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
   </head>
 
   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3(0, 1, 0);
        
            var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
            camera.attachControl(canvas, true);
        
            var music = new BABYLON.Sound("sound", "sounds/music.wav", scene, null, {
               loop: true,
               autoplay: true
            });
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

یک فایل wav ، از فایلهای دانلود پیدا کنید و در پوشه soundz کنار فایل برنامه قرار دهید.
بعد اجرای برنامه یک صفحه سبز می آید ، که یک آیکون کوچک گوشه سمت چپ و بالا دارد که باید با زدن اون صدا را روشن کنیم.


Screenshot_۲۰۲۳-۰۹-۱۵_۱۷۲۹۲۲.jpg

البته فکر کنم باید کمی صبر کنید تا فایل صدا لود بشود تا این آیکون ظاهر شود.
بعد زدن آیکون ، پشت سر هم صدا اجرا می شود. یعنی بعد هر اتمام ، از اول صوت اجرا می شود.
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
سالک: یک سری از آموزشهای سایت فوق گفته شد ، تعدادی هم ماند.
من خودم هنوز بازی سازی با بابیلون را شروع نکردم ، فقط یک سری از سورس هایش را در تاپیک نقل کردم.
اگر کسی مشغول ساخت بازی خود باشد ، اون نیاز به کد خاص باعث میشه گیرایی اش بسیار بالاتر برود. و من چون در این فاز نبودم ، سطحی کار کردم.


در پست قبل می خواهم یک سری صحبتهای کلی در مورد گرافیک بکنم.
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
مفاهیم گرافیکی:


سالک: من اولین بار نیست که گرافیک کار می کنم ، ....
برای همین با مفاهیم و کلیات کار آشنایی دارم.
مثلا می دونم تکسچر چیه و ماتریال چیه و نقش دوربین و نورها چطور هستند.

من آموزشهایی درمورد این چیزها داشتم. در تاپیک های مختلف.
فعلا یک مقدار انسجام تاپیک هایی که ایجاد کردم خوب نیست. و باید روی اون کار کنم و نظم و اطلاع رسانی بهتری ایجاد کنم.


شاید من فعلا در این تاپیک نتوانم درست مفاهیم گرافیک را توضیح بدهم. پس بهتره این مفاهیم را در گوگل سرچ کنید و یاد بگیرید. در تمام محیط های گرافیکی این مفاهیم وجود دارد. یعنی هر کس گرافیک کار می کند با این مفاهیم روبروست. کدنویسی فقط روبرو شدن با این مفاهیم است. چون کامپیوتر و گوشی از لحاظ سخت افزاری ، جور خاصی با گرافیک برخورد می کند و به تبع اون تمام رشته های گرافیکی از همون برخورد متاثر میشوند.
مهم نیست اون شخص در چه مقوله ای گرافیک کار می کند. هر توضیحی که می دهد در رشته های گرافیکی دیگر هم صادق است.
من خودم وقتی opengl کار می کردم ، یک سری تصاویر مفهومی دیدم که خیلی از پارامترهای کدنویسی را برام با معنی کرد. دوست دارم این مفاهیم را یک جایی بگم ، ....... فعلا سعی می کنم حین شرح کدها کمی هم مفاهیم گرافیک را بگم .

فعلا شما وقتی یک سورسی می بینید ، باید با ور رفتن بهش و تغییر اعدادش ، تغییر در گرافیک را تحت نظر بگیرید تا بفهمید هر پارامتر نقشش چیست.


در مورد بابیلون من تازه شروع کردم و هنوز دید کلی بهش پیدا نکردم.
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
فعلا می خواهم یک سایت جدید پیدا کنم تا با کدهای اون تمرین کنیم
سایت قبلی نیمه کاره موند، و شاید بعدا برگشتیم تمومش کردیم. ولی مباحث اولیه گفته شد. و همون ها برای شروع ساخت بازی کافی است. در سایتهای دیگر اگر پیدا کردیم ، باز این مباحث را ترین می کنیم و شاید من بتونم بازی خودم را شروع کنم.
 
saalek110

saalek110

Well-Known Member
معماری کلی کدهای بابیلون:


JavaScript: 
       const createScene =  () => {
    const scene = new BABYLON.Scene(engine);

    /**** Set camera and light *****/
    const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 10, new BABYLON.Vector3(0, 0, 0));
    camera.attachControl(canvas, true);
    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));

    const box = BABYLON.MeshBuilder.CreateBox("box", {});
    const ground = BABYLO
[CODE=javascript] 
N.MeshBuilder.CreateGround("ground", {width:10, height:10});

    return scene;
}


Babylon.js Playground

Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes
playground.babylonjs.com playground.babylonjs.com

لینک بالا یک زمین و یک مکعب را نشان می دهد ، یک آیکون سمت چپ و پایین هست که اگر بزنید ، کدش می آید. که همین کد بالاست که من پست زدم در این پست.

حالا به این کد نگاه کنید:
JavaScript: 
    const createScene =  () => {
    const scene = new BABYLON.Scene(engine);



    return scene;
}
خود سایت بابیلون میگه این کد اصلی است که باید استفاده کنید.
و داخلش در کدهای قبلی همین پست می بینید که دوربین و نور و زمین و مکعب آورده شده.

که این تکه را با خرت و پرتهای داخلش شامل دوربین و مکعب و ....
می گذارید در میان تگ های html
و اون لینک به فایلهای بابیلون هم باید افزوده بشه. که در پستهای قبلی این تاپیک من سه خط کد زیر را همواره به کدها می افزودم:
JavaScript: 
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>


پس این شد معماری کلی کدها. به گفته سایت خود بابیلون.
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
در همون صفحه که لینکش را پست قبل دادم ، یک منو از دکمه سمت چپ و بالا ، قابل باز شدن است که یکی از گزینه هایش save است ، که کد زیر را به ما می دهد:
Screenshot_۲۰۲۳-۰۹-۱۵_۲۰۰۵۰۱.jpg
JavaScript: 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Babylon Template</title>

    <style>
      html,
      body {
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #renderCanvas {
        width: 100%;
        height: 100%;
        touch-action: none;
      }
    </style>

    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
  </head>

  <body>
    <canvas id="renderCanvas" touch-action="none"></canvas>
    <!-- touch-action="none" for best results from PEP -->

    <script>
      const canvas = document.getElementById("renderCanvas"); // Get the canvas element
      const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

      // Add your code here matching the playground format
      const createScene = function () {
        const scene = new BABYLON.Scene(engine);

        BABYLON.MeshBuilder.CreateBox("box", {});

        const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 15, new BABYLON.Vector3(0, 0, 0));
        camera.attachControl(canvas, true);
        const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));

        return scene;
      };

      const scene = createScene(); //Call the createScene function

      // Register a render loop to repeatedly render the scene
      engine.runRenderLoop(function () {
        scene.render();
      });

      // Watch for browser/canvas resize events
      window.addEventListener("resize", function () {
        engine.resize();
      });
    </script>
  </body>
</html>

در کد بالا ، همان طور که در پست قبل گفتیم ، تگهای html اضافه شده و لینک به فایلهای مورد نیاز بابیلون داده شده ، ولی چند خط کد زیر اون هسته هم اضافه شده. هسته منظورم همان تابع createscene است که داخلش مکعب و دوربین و ...قرار دارد.

یکی از کدهای زیر هسته ، کد فراخوانی تابع هسته است که تابع هسته را صدا می زنه.
دومی همان طور که در کد توضیح داده شده ، یک حقله اجرای رندر ایجاد می کند.
سومی هم یک گوش دهنده به رویداد ایجاد کرده.
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
برای زنگ تفریح مقایسه ای می کنیم بین three.js و بابیلون:

Both Three.js and Babylon.js are excellent choices for creating 3D graphics on the web. Three.js is lightweight and easy to use, making it a great choice for beginners or for simpler applications. Babylon.js, on the other hand, is more complex and feature-rich and is designed specifically for game development and other immersive applications.

Ultimately, the choice between Three.js and Babylon.js will depend on the specific needs and goals of your project. If you’re new to 3D programming or are building a simpler application, Three.js is probably the best choice. If you’re building a more complex application that requires advanced physics and animation, or if you’re building a game or other immersive application, Babylon.js is the better choice.


www.linkedin.com

Comparing Three.js and Babylon.js: Which JavaScript 3D Library is Right for You?

Three.js and Babylon.
www.linkedin.com www.linkedin.com
 
saalek110

saalek110

Well-Known Member
پست مهر ۱۴۰۳ ، من نزدیک یک ماه است thre.js کار می کنم. تاپیک فعلی یعنی بابیلون را خوندم و کدهایش را مرور کردم ، لینکهایش به فضای من ، درست بود و کار می کرد. نمونه اول فکر کنم نزدیک یک دقیقه طول کشید load بشود. بابیلون شاید بشود گفت رقیب three.js است. دوست دارم بعدا باز بابیلون کار کنم. فعلا دارم با three.js یک محیطی می سازم.
 
برای ارسال پاسخ شما باید وارد سیستم شوید.

آخرین مطالب مجیدآنلاین

جدیدترین ارسال ها

بالا