שלום שוב לקוראים היקרים והנה אחד מבין השיעורים שיעלו חיוך על פניכם, אחד הדברים היותר מרגשים כשמתכנתים תלת בתלת מימד זה שהדברים מתחילים לזוז ואז ממש רואים את האפקט התלת מימדי שרק בתוך הקאנווס שלנו שרץ על דפדפן שעושה שימוש בGPU …. קיצר מרגש! אז שוב כהרגלנו רשימת השיעורים האחרונים:
להלן רצף השיעורים בקורס תכנות משחקים – webgl
- קורס תכנות משחקים – webgl – שיעור ראשון – הקמת הפרויקט
- קורס תכנות משחקים – webgl – שיעור שני- הסצנה והמצלמה
- קורס תכנות משחקים – webgl – שיעור שלישי- ציור של אובייקט המטבע
פונקציית ה Animate וחברינו render.
הסבר אינטואיטיבי קצר ואז ניגש לקוד ולהסברים שלו.
באופן כללי בשביל לצייר תנועה צריך כמה דברים, צריך לייצר שינוי כלשהו לאובייקט הגרפי ואז לרנדר על מנת שנראה את השינוי. וכל זה יקר פר frame בפרקי זמן קטנים כך שהתנועה תיהיה חלקה כמה שאפשר. אז בטח כבר אתם מבינים שהולך להיות פה שימוש באיזה setInteral שכזה וגם שימוש חוזר ב render. ועכשיו ניגש לקוד שיש בו מעט שינויים אבל בהחלט חשובים:
import React, { Component } from 'react'; import * as THREE from 'three'; class Coin extends Component { constructor(props) { super(props); this.state = {}; this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000); this.scene = new THREE.Scene(); this.renderer = null; this.cylinder = null; this.canvasRef = React.createRef(); } initialObj() { this.camera.position.z = 100; this.renderer = new THREE.WebGLRenderer({ canvas: this.canvasRef.current, }); this.renderer.setPixelRatio(window.devicePixelRatio); this.renderer.setSize(window.innerWidth, window.innerHeight); } componentDidMount() { this.initialObj(); this.createShape(); this.animate(); } createShape() { const geometry = new THREE.CylinderGeometry(10, 10, 1, 100); const material = new THREE.MeshBasicMaterial({ color: 0xffff00 }) this.cylinder = new THREE.Mesh(geometry, material); this.cylinder.lookAt(0, 1 ,0); this.scene.add(this.cylinder); } animate() { const spininngCoin = setInterval(() => { this.cylinder.rotation.z += 0.01; this.renderer.render(this.scene, this.camera); }); } render() { return ( <canvas ref={this.canvasRef} className="canvasClass"></canvas> ) } } export default Coin;
פונקצייה ה animate שלנו לוקחת אליה את הרינדור ועוטפת אותו ב setinterval וגם באותה נשימה משנה את מיקום הצילינדר שלנו על ציר ה Z וככה מסובבת את האובייקט במקומו לכיוון ימין (כי הוספתי מספר חיובי) הוספנו מספר של 0.01 בכל פריים של setinterval , אם נוסיף מספר קטן יותר הצילינדר אז הסיבוב יהיה איטי יותר ואם נוסיף מספר גדול יותר הסיבוב יהיה מהיר יותר.
כמו כן נקרא ל animate ב componentDidMount וסיימנו.
סיכום שיעור רביעי webgl | תכנות משחקים
אז השיעור היה קצר וגם הקוד שהתווסף היה בקטנה אבל זהו שלב מהותי וגם בהמשך יהיה שימוש רב עם הפונקציה של animate. אז התחלנו לאט על מנת להתקדם בבטחה. בשיעור הבא נעשה כמה טריקים על מנת של צילינדר יהיו 2 צדדים כנהוג אצל מטבעות במשחק של toss up .