Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Docs(Ar): Manual - Next steps section #20106

Merged
merged 4 commits into from
Aug 18, 2020
Merged

Docs(Ar): Manual - Next steps section #20106

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ec28c76
init: Manual::Next-step mapping
hassanMuhamad Aug 18, 2020
f5d6677
add: How-to-update-things Arabic doc page
hassanMuhamad Aug 18, 2020
a0f7d40
add: How-to-dispose-of-objects Arabic doc page
hassanMuhamad Aug 18, 2020
8b670e2
fix: indentation issue
hassanMuhamad Aug 18, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions docs/list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -479,6 +479,11 @@ var list = {
"روابط مفيدة": "manual/ar/introduction/Useful-links"
},

"الخطوات التالية": {
"كيفية تحديث الأشياء": "manual/ar/introduction/How-to-update-things",
"كيفية التخلص من الأشياء": "manual/ar/introduction/How-to-dispose-of-objects"
},

},

},
Expand Down
100 changes: 100 additions & 0 deletions docs/manual/ar/introduction/How-to-dispose-of-objects.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
<!DOCTYPE html>
<html lang="ar">

<head>
<meta charset="utf-8">
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>

<body class="rtl">
<h1>كيفية التخلص من الأشياء</h1>

<p>
أحد الجوانب المهمة لتحسين الأداء وتجنب تسرب الذاكرة في تطبيقك هو التخلص من كيانات المكتبة غير المستخدمة. عندما تقوم بإنشاء مثيل من النوع * three.js * ، فإنك تخصص قدرًا معينًا من الذاكرة.
ومع ذلك ، يُنشئ * three.js * كائنات محددة مثل الأشكال الهندسية أو المواد ، كيانات ذات صلة بـ WebGL مثل المخازن المؤقتة أو برامج التظليل الضرورية للعرض. من المهم إبراز أن هذه الكائنات لا يتم تحريرها تلقائيًا ، وبدلاً من ذلك ، يجب أن يستخدم التطبيق واجهة برمجة تطبيقات خاصة لتحرير هذه الموارد. يقدم هذا الدليل نظرة عامة موجزة حول كيفية استخدام واجهة برمجة التطبيقات هذه وما هي الكائنات ذات الصلة في هذا السياق.
</p>

<h2>الهندسة (Geometries)</h2>

<p>
تمثل الهندسة عادةً معلومات قمة الرأس تُعرَّف على أنها مجموعة من السمات. تنشئ * three.js * داخليًا كائنًا من النوع [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLBuffer WebGLBuffer] لكل سمة. يتم حذف هذه الكيانات فقط إذا اتصلت بـ [page:BufferGeometry.dispose](). إذا أصبحت الهندسة قديمة في التطبيق الخاص بك ، فقم بتنفيذ الطريقة لتحرير جميع الموارد ذات الصلة.
</p>

<h2>المواد (Materials)</h2>

<p>
تحدد المادة كيفية تجسيد الكائنات. يستخدم * three.js * معلومات تعريف المادة لإنشاء برنامج تظليل للعرض.
لا يمكن حذف برامج Shader إلا إذا تم التخلص من المواد المعنية. لأسباب تتعلق بالأداء ، يحاول * three.js * إعادة استخدام القائمة برامج تظليل إن أمكن. لذلك يتم حذف برنامج shader فقط إذا تم التخلص من جميع المواد ذات الصلة. يمكنك الإشارة إلى التخلص من مادة عن طريق تنفيذ [page:Material.dispose] ().
</p>

<h2>الأنسجة (Textures)</h2>

<p>
التخلص من المواد ليس له أي تأثير على القوام. يتم التعامل معها بشكل منفصل حيث يمكن استخدام نسيج واحد بواسطة مواد متعددة في نفس الوقت.
عندما تقوم بإنشاء مثيل [page:Texture] ، فإن three.js داخليًا تنشئ مثيلًا من [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLTexture WebGLTexture].
على غرار المخازن المؤقتة ، لا يمكن حذف هذا الكائن إلا عن طريق استدعاء [page:Texture.dispose]().
</p>

<h2>أهداف العرض</h2>

<p>
لا تقوم الكائنات من النوع [page:WebGLRenderTarget] فقط بتخصيص مثيل لـ [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLTexture WebGLTexture] ولكن أيضًا [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLFramebuffer WebGLFramebuffer]s و [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderbuffer WebGLRenderbuffer]s لتحقيق وجهات العرض المخصصة. لا يتم تخصيص هذه الكائنات إلا بتنفيذ [page:WebGLRenderTarget.dispose]().
</p>

<h2>متفرقات (Miscellaneous)</h2>

<p>
هناك فئات أخرى من دليل الأمثلة مثل الضوابط أو ممرات المعالجة اللاحقة التي توفر طرق * dispose () * من أجل إزالة مستمعي الأحداث الداخلية أو تقديم الأهداف. بشكل عام ، يوصى بالتحقق من واجهة برمجة التطبيقات أو وثائق الفصل الدراسي ومراقبة * dispose () *. إذا كان موجودًا ، يجب استخدامه عند تنظيف الأشياء.
</p>

<h2>الأسئلة الشائعة (FAQ)</h2>

<h3>لماذا لا يمكن لـ * three.js * التخلص من الكائنات تلقائيًا؟</h3>

<p>
تم طرح هذا السؤال عدة مرات من قبل المجتمع ، لذا من المهم توضيح هذا الأمر. الحقيقة هي أن * three.js * لا تعرف عمر أو نطاق الكيانات التي أنشأها المستخدم مثل الأشكال الهندسية أو المواد. هذه هي مسؤولية التطبيق. على سبيل المثال ، حتى إذا لم يتم استخدام مادة حاليًا للعرض ، فقد تكون ضرورية للإطار التالي. لذلك إذا قرر التطبيق أنه يمكن حذف كائن معين ، فيجب عليه إخبار المحرك عن طريق استدعاء طريقة *dispose()* المعنية.
</p>

<h3>هل تؤدي إزالة الشبكة من المشهد إلى التخلص من هندستها ومادتها أيضًا؟</h3>

<p>
لا ، يجب عليك التخلص صراحة من الهندسة والمواد عبر *dispose()*. ضع في اعتبارك أنه يمكن مشاركة الأشكال الهندسية والمواد بين الكائنات ثلاثية الأبعاد مثل الشبكات.
</p>

<h3>هل توفر * three.js * معلومات حول كمية العناصر المخزنة مؤقتًا؟</h3>

<p>
نعم. من الممكن تقييم [page:WebGLRenderer.info] ، وهي خاصية خاصة للعارض مع سلسلة من المعلومات الإحصائية حول ذاكرة لوحة الرسومات وعملية العرض. من بين أشياء أخرى ، تخبرك أن لديك العديد من القوام والهندسة وبرامج التظليل مخزنة داخليًا. إذا لاحظت وجود مشاكل في الأداء في التطبيق الخاص بك ، فمن الأفضل تصحيح هذه الخاصية من أجل التعرف بسهولة على تسرب الذاكرة.
</p>

<h3>ماذا يحدث عندما تستدعي * dispose () * على نسيج لكن الصورة لم يتم تحميلها بعد؟</h3>

<p>
يتم تخصيص الموارد الداخلية للنسيج فقط إذا تم تحميل الصورة بالكامل. إذا تخلصت من نسيج قبل تحميل الصورة ، فلن يحدث شيء. لم يتم تخصيص أي موارد لذلك ليست هناك حاجة للتنظيف.
</p>

<h3>ماذا يحدث عندما تستدعي * dispose () * ثم أستخدم النموذج المعني في وقت لاحق؟</h3>

<p>
سيتم إنشاء الموارد الداخلية المحذوفة مرة أخرى بواسطة المحرك. لذلك لن يحدث أي خطأ في وقت التشغيل ولكن قد تلاحظ تأثيرًا سلبيًا على الأداء للإطار الحالي ، خاصةً عندما يتعين تجميع برامج shader.
</p>

<h3>كيف يمكنني إدارة كائنات * three.js * في تطبيقي؟ متى أعرف كيف أتخلص من الأشياء؟</h3>

<p>
بشكل عام ، لا توجد توصية محددة لهذا الغرض. يعتمد الأمر بشكل كبير على حالة الاستخدام المحددة عندما يكون الاتصال بالرقم *dispose()* مناسبًا. من المهم إبراز أنه ليس من الضروري دائمًا التخلص من الأشياء طوال الوقت. وخير مثال على ذلك هو اللعبة التي تتكون من مستويات متعددة. مكان جيد للتخلص من الأشياء عند تبديل المستوى. يمكن للتطبيق اجتياز المشهد القديم والتخلص من جميع المواد والأشكال الهندسية والقوام المتقادمة. كما هو مذكور في القسم السابق ، لا ينتج عنه خطأ في وقت التشغيل إذا تخلصت من كائن لا يزال قيد الاستخدام بالفعل. أسوأ شيء يمكن أن يحدث هو انخفاض الأداء لإطار واحد.
</p>

<h2>أمثلة توضح استخدام dispose()</h2>

<p>
[example:webgl_test_memory WebGL / test / memory]<br />
[example:webgl_test_memory2 WebGL / test / memory2]<br />
</p>

</body>

</html>
241 changes: 241 additions & 0 deletions docs/manual/ar/introduction/How-to-update-things.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,241 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8">
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
<h1>كيفية تحديث الأشياء</h1>
<div>
<p>تقوم كل الكائنات بشكل ألي بتحديث حالتها تلقائيًا إذا تمت إضافتها إلى المشهد باستخدام</p>
<code>
var object = new THREE.Object3D();
scene.add( object );
</code>
<p>أو إذا كانوا أبناء كائن آخر تمت إضافته إلى المشهد:</p>
<code>
var object1 = new THREE.Object3D();
var object2 = new THREE.Object3D();

object1.add( object2 );
scene.add( object1 ); //object1 and object2 will automatically update their matrices
</code>
</div>

<p>ومع ذلك ، إذا كنت تعلم أن الكائن سيكون ثابتًا ، فيمكنك تعطيل هذا وتحديث وضيفة التحديث يدويًا عند الحاجة فقط.</p>

<code>
object.matrixAutoUpdate = false;
object.updateMatrix();
</code>

<h2>BufferGeometry</h2>
<div>
<p>
يخزن BufferGeometries المعلومات (مثل مواضع الرأس ومؤشرات الوجه والعلامات والألوان وUVs وأي سمات مخصصة) في [page:BufferAttribute buffers] - أي ،
[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays typed arrays].
هذا يجعلها بشكل عام أسرع من الهندسة الأساسية (standard geometry) ، بحساب تكلفة العمل بها إلى حد ما.
</p>
<p>
فيما يتعلق بتحديث BufferGeometries ، فإن أهم شيء يجب فهمه هو أنه لا يمكنك تغيير حجم المخازن المؤقتة (هذا مكلف للغاية ، ويعادل بشكل أساسي إنشاء هندسة جديدة). ومع ذلك يمكنك تحديث محتوى المخازن المؤقتة.
</p>
<p>
هذا يعني أنك إذا كنت تعرف أن إحدى سمات BufferGeometry ستنمو ، لنقل عدد الرؤوس ، فيجب عليك تخصيص مخزن مؤقت كبير بما يكفي لاحتواء أي رؤوس جديدة قد يتم إنشاؤها. بالطبع ، هذا يعني أيضًا أنه سيكون هناك حد أقصى لحجم BufferGeometry - لا توجد طريقة لإنشاء BufferGeometry يمكن تمديده حجم غير محدود.
</p>
<p>
سنستخدم مثال السطر الذي سيتم تمديده في وقت العرض. سنخصص مساحة في المخزن المؤقت لـ 500 رأس لكننا نرسم اثنين فقط في البداية ، باستخدام [page:BufferGeometry.drawRange].
</p>
<code>
var MAX_POINTS = 500;

// geometry
var geometry = new THREE.BufferGeometry();

// attributes
var positions = new Float32Array( MAX_POINTS * 3 ); // 3 vertices per point
geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );

// draw range
var drawCount = 2; // draw the first 2 points, only
geometry.setDrawRange( 0, drawCount );

// material
var material = new THREE.LineBasicMaterial( { color: 0xff0000 } );

// line
var line = new THREE.Line( geometry, material );
scene.add( line );
</code>
<p>
بعد ذلك سنضيف نقاطًا بشكل عشوائي إلى الخط باستخدام نمط مثل:
</p>
<code>
var positions = line.geometry.attributes.position.array;

var x, y, z, index;
x = y = z = index = 0;

for ( var i = 0, l = MAX_POINTS; i < l; i ++ ) {

positions[ index ++ ] = x;
positions[ index ++ ] = y;
positions[ index ++ ] = z;

x += ( Math.random() - 0.5 ) * 30;
y += ( Math.random() - 0.5 ) * 30;
z += ( Math.random() - 0.5 ) * 30;

}
</code>
<p>
إذا كنت تريد تغيير <em>عدد النقاط</em> التي تم إظهارها بعد العرض الأول ، فقم بما يلي:
</p>
<code>
line.geometry.setDrawRange( 0, newValue );
</code>
<p>
إذا كنت تريد تغيير قيم بيانات الموضع بعد العرض الأول ، فأنت بحاجة إلى تعيين علامة needsUpdate على النحو التالي:
</p>
<code>
line.geometry.attributes.position.needsUpdate = true; // required after the first render
</code>

<p>
إذا قمت بتغيير قيم بيانات الموقع بعد التصيير الأولي ، فقد تحتاج إلى استدعاء `` .computeBoundingSphere () 'لإعادة حساب المجال المحيط للهندسة.
</p>
<code>
line.geometry.computeBoundingSphere();
</code>

<p>
هنا مثال يعرض خطًا متحركًا يمكن تكييفه مع حالة الاستخدام الخاصة بك.
[link:http://jsfiddle.net/w67tzfhx/ Here is a fiddle]
</p>

<h3>أمثلة</h3>

<p>
[example:webgl_custom_attributes WebGL / custom / attributes]<br />
[example:webgl_buffergeometry_custom_attributes_particles WebGL / buffergeometry / custom / attributes / particles]
</p>

</div>

<h2>الهندسة (Geometry)</h2>
<div>
<p>
تتحكم العلامات التالية في تحديث سمات الهندسة المختلفة. قم بتعيين العلامات فقط للسمات التي تحتاج إلى تحديثها ، فالتحديثات مكلفة. بمجرد تغيير المخازن المؤقتة ، يتم إعادة تعيين هذه العلامات تلقائيًا إلى false. تحتاج إلى الاستمرار في ضبطها على true إذا كنت تريد الاستمرار في تحديث المخازن المؤقتة. لاحظ أن هذا ينطبق فقط على [page:Geometry] وليس [page:BufferGeometry].
</p>
<code>
var geometry = new THREE.Geometry();
geometry.verticesNeedUpdate = true;
geometry.elementsNeedUpdate = true;
geometry.morphTargetsNeedUpdate = true;
geometry.uvsNeedUpdate = true;
geometry.normalsNeedUpdate = true;
geometry.colorsNeedUpdate = true;
geometry.tangentsNeedUpdate = true;
</code>

<p>
في الإصدارات السابقة لـ [link:https://github.com/mrdoob/three.js/releases/tag/r66 r66] ، تحتاج الشبكات أيضًا إلى تمكين العلامة <em>الديناميكية</em> (للاحتفاظ بالمصفوفات المكتوبة داخليًا):
</p>

<code>
//removed after r66
geometry.dynamic = true;
</code>

</div>

<h2>المواد (Materials)</h2>
<div>
<p>يمكن تغيير جميع قيم الزي الرسمي بحرية (على سبيل المثال ، الألوان ، والأنسجة ، والعتامة ، وما إلى ذلك) ، ويتم إرسال القيم إلى الشادر (shader) في كل إطار.</p>

<p>يمكن أيضًا تغيير المعلمات ذات الصلة بـ GLstate في أي وقت (depthTest, blending, polygonOffset, etc).</p>

<p>لا يمكن تغيير الخصائص التالية بسهولة في وقت التشغيل (بمجرد تقديم المادة مرة واحدة على الأقل):</p>
<ul>
<li>numbers and types of uniforms</li>
<li>presence or not of
<ul>
<li>texture</li>
<li>fog</li>
<li>vertex colors</li>
<li>skinning</li>
<li>morphing</li>
<li>shadow map</li>
<li>alpha test</li>
</ul>
</li>
</ul>

<p>تتطلب التغييرات في هذه بناء برنامج شادر (shader) جديد. سوف تحتاج إلى ضبط</p>
<code>material.needsUpdate = true</code>

<p>ضع في اعتبارك أن هذا قد يكون بطيئًا للغاية ويؤدي إلى اهتزاز في معدل الإطارات (خاصة على Windows ، حيث أن التحويل البرمجي للشادر (shader) يكون أبطأ في DirectX منه في OpenGL).</p>

<p>للحصول على تجربة أكثر سلاسة ، يمكنك محاكاة التغييرات في هذه الميزات إلى حد ما من خلال الحصول على قيم "وهمية" مثل الأضواء صفر الكثافة أو الزخارف البيضاء أو الضباب الصفري.</p>

<p>يمكنك تغيير المواد المستخدمة في القطع الهندسية بحرية ، ولكن لا يمكنك تغيير كيفية تقسيم الكائن إلى أجزاء (وفقًا لمواد الوجه). </p>

<h3>إذا كنت بحاجة إلى تكوينات مختلفة من المواد أثناء وقت التشغيل:</h3>
<p>إذا كان عدد المواد / القطع الصغيرًة ، فيمكنك تقسيم الجسم مسبقًا (مثل الشعر / الوجه / الجسم / الملابس العلوية / السراويل للإنسان ، أمامي / جوانب / الجزء العلوي / الزجاج / الإطار / الجزء الداخلي للسيارة). </p>

<p>إذا كان الرقم كبيرًا (على سبيل المثال ، من المحتمل أن يكون كل وجه مختلفًا) ، ففكر في حل مختلف ، مثل استخدام السمات / القوام للحصول على مظهر مختلف لكل وجه.</p>

<h3>أمثلة</h3>
<p>
[example:webgl_materials_car WebGL / materials / car]<br />
[example:webgl_postprocessing_dof WebGL / webgl_postprocessing / dof]
</p>
</div>


<h2>النسيج (Textures)</h2>
<div>
<p>يجب أن يتم تعيين العلامات التالية في الصورة ، canvas والفيديو والبيانات إذا تم تغييرها:</p>
<code>
texture.needsUpdate = true;
</code>
<p>العرض يستهدف التحديث تلقائيا.</p>

<h3>أمثلة</h3>
<p>
[example:webgl_materials_video WebGL / materials / video]<br />
[example:webgl_rtt WebGL / rtt]
</p>

</div>


<h2>الكاميرات (Cameras)</h2>
<div>
<p>يتم تحديث موضع الكاميرا وهدفها تلقائيًا. إذا كنت بحاجة إلى التغيير</p>
<ul>
<li>
fov
</li>
<li>
aspect
</li>
<li>
near
</li>
<li>
far
</li>
</ul>
<p>
ثم ستحتاج إلى إعادة حساب مصفوفة الإسقاط(the projection matrix):
</p>
<code>
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
</code>
</div>
</body>
</html>