יכול להיות שנתקלתם פה ושם באתרים שעושים שימוש בתלת מימד באתר שלהם. יכול להיות שחשבתם שזה איזה וידאו או קובץ תמונה כל שהוא שכן זה יתכן אבל אם עשיתם "בדוק מרכיב" אולי נתקלתם בתגית canvas ולשם זה החלטתי לבנות קורס שיתן לכם כלים לבנות אובייקטים תלת מימדיים על גבי דפדפן . אז ברוכים הבאים לקורס בתלת מימד עם canvas. מי שעוד לא מכיר canvas, זהו תגית HTML , המאפשרת לנו לצייר בתוכה עם קוד java script, מה שבעצם אנחנו עושים עם התגית הזו , זה משתמשים בפונקציה של getContext שמקבלת contextType שיכול להיות מסוגים שונים. בשביל לעשות תלת מימד אנחנו משתמשים ב"webgl" וכך מאפשרים לבנות אובייקט תלת מימדי :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>codcodile Webgl course</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');
console.log(gl)
</script>
</body>
</html>
הטכנולוגיה הזו מאפשרת לנו להשתמש במשאבי הGPU של המשחב וכך לקבל ביצועי עיבוד גובוהים ולייצר אפילו משחקים מלאי גרפיקה על דפדפן האינטרנט.
למה ללמוד webgl
מתכנתי פרונט שאוהבים דברים חדשים ואתגרי קוד שכן משפיעים על הנראות ישמחו מאד לשלב תלת מימד בקוד שלהם, וכן אני מזהיר מדובר בקוד מורכב, בוודאי שאם אתם תעמיקו בנושא אז זה כבר ניהיה קוד כבד שמשלם המון מתמטיקה והראש שלכם הולך לכאוב קצת. אין לי ספק (וגם מניסיון כמובן) שעבודה עם webgl תשפר לכם את יכולות הקידוד שלכם וההבנה שלכם עם עיבודים גרפיים שיש למחשב והדפדפן. כלו כלים שכל מפתח צד לקוח צריך שיהיו לו אם הוא מכוו גבוהה. ברמת דרישות בתעשייה לא רואים הרבה בקשות של ידע עם webgl , זה פחות נפוץ בתעשייה אלא אם מדובר בחברות של פיתוח משחקים שכן רואים דרישות מסוג זה.
ספריית עזר threejs
אפשר לעבוד ישירות עם webgl אבל ישנם ספריות שיעזרו לנו המון להתקדם מהר יותר וקבל תוצאות מעולות . הספריה הפופולארית ביותר היום בתחום היא threejs , ולכן נאעזר בה בקורס זה.
מתחילים! react and three
אז נכין את התשתית שלנו כך שנרים סביבת צד לקוח ב react ונתקין את הספריה של threejs.
בשביל להקים את הפרויקט שלנו נריץ :
npx create-react-app toss-up
ועכשיו נתקין את הספריה של threejs:
npm i three
ועכשיו נכין כמה קבצים:
- נכין רכיב ריאקטי של coin עם תגית קאנווס.
- נשים את כל הלוגיקה של three ב coin.jsx
- נשנה מעט את app.jsx
- נוסיף קצת CSS לstyle.css הראשי בשביל לסדר את הקאנווס בגודל של כל המסך
להלן הקבצים:
* {
box-sizing: border-box;
}
html, #root{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}
import React, { useRef, useEffect } from 'react';
import * as THREE from 'three';
let renderer = null;
const initilaze = (canvas) => {
renderer = new THREE.WebGLRenderer({
canvas,
});
}
function Coin() {
const canvasRef = useRef(null);
useEffect(() => {
initilaze(canvasRef.current);
}, [])
return (
<canvas ref={canvasRef} className="canvasClass" style={{ width: '100%', height: '100%' }}></canvas>
)
}
export default Coin;
import Coin from "./coin";
import './App.css';
function App() {
return (
<div className="App">
<Coin />
</div>
);
}
export default App;
מה שאתם אמורים לראות כרגע שזה מסך שחור שתופס את כל המסך. למעשה זהו הרכיב של הקאנווס שפרוס על כל המסך . בהגדרה שלו הוא בצבע שחור כברירת מחדל. ונמשיך להסבר על הקוד שלנו .
מה זה WebGLRenderer
נראה כי הקוד דיי ברור , יש לנו רכיב coin שהוא function component שמחזיקה HTML אלמנט מסוג canvas. והחלק המעניין הוא העבודה עם three . נתחיל עם הגדרה בסיסית :
WebGLRenderer | מרנדר את היצירה שלנו לתוך canvas . מקבל פרמטרים כאובייקט . כפי שניתן לראות העברנו את קאנווס לקאנווס פרמטר וכך למעשה הופך הקאנווס שלנו ל canvas עם context של webgl.
WebGLRenderer הינו קלאס מאוד שימושי, בהמשך תראו עוד שימושים שהוא עושה עבורנו והוא מאד בסיסי לעבודה עם THREE כמו למשל לרנדר את ה secne וה camera לתוך הקאנווס שלנו. (כל ההסברים בהמשך הקורס כמובן)
ממליץ בחום להדפיס לקונסול את renderer ולראות איך נראה הקלאס של WebGLRenderer מאד מעניין.
סיכום שיעור ראשון webgl | תכנות משחקים
אומנם לא עשינו יותר מידי אבל זה בדיוק השלב לסיים ולעבור לנושא הבא שלנו . כפי שאולי נחשתם הפרויקט יהיה הטלת מטבע. יהיה פה איזה משחק נחמד שכולו מבוסס תלת מימד על גבי דפדפן באמצעות תגית הקאנווס ומימוש של three ורינדורו לתוך הקאנווס. אז כרגע יצרנו רק את הבסיס להמשך עבודה ומפה נרשום בעיקר three. בחרתי לשלב react כי זה נוח לי אישית אבל כל המימוש יכול להתבצע בקובץ js אחד וקובץ index.html.
