docs(app): light-shadows and shaders docs examples #506

JaimeTorrealba · 2024-01-11T11:16:26Z

closes #476

netlify · 2024-01-11T11:16:31Z

✅ Deploy Preview for tresjs-docs ready!

Name	Link
🔨 Latest commit	`85b4392`
🔍 Latest deploy log	https://app.netlify.com/sites/tresjs-docs/deploys/65b4f043260e610008c4d057
😎 Deploy Preview	https://deploy-preview-506--tresjs-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

docs/examples/shaders.md

docs/.vitepress/config.ts

alvarosabu

Hey @JaimeTorrealba the guide needs some work, please take a look to the comments, any question let me now

alvarosabu · 2024-01-16T18:29:01Z

docs/examples/lights-shadows.md

+
+We could divide this into three steps.
+
+**Number 1**: Set the shadows on the renderer


Suggested change

**Number 1**: Set the shadows on the renderer

### Set the shadows on the renderer

alvarosabu · 2024-01-16T18:30:02Z

docs/examples/lights-shadows.md

+  //...
+</template>
+```
+**Number 2**: Set the light to cast shadow


Suggested change

**Number 2**: Set the light to cast shadow

### Set the light to cast shadow

alvarosabu · 2024-01-16T18:30:18Z

docs/examples/lights-shadows.md

+  //...
+</template>
+```
+**Number 3**: Set the objects to cast or receive shadows


Suggested change

**Number 3**: Set the objects to cast or receive shadows

### Set the objects to cast or receive shadows

alvarosabu · 2024-01-16T18:34:10Z

docs/examples/lights-shadows.md

+We will build a simple scene with three meshes and a plane but only two will have shadows.
+<SandboxDemo url="https://play.tresjs.org/#eNqVVt1y2jwQfRUN30WSKdimhLbjL3Qo9GfaadpM4K7uhbAXUGpLGkn8pJm8e1eSDXZCMmRCGGv37NHZ1XrFXWuqQH+QMlivoBW3LnSqmDREg1lJklO+GCQto5PW+4SzQgplyB3RS5rnYnMNc3JP5koU5ASjT/6vQSzrmPI11W2y0nANPAP1XQhZBQwNIm50mArVjPypZsyMBTdK5HrHv4Mz4EboRsSIapZOljQTm0sq22Ry/WU0FrlQE0lTaJMfYio4oEsyvtgxmqUCOEl4wlPBtSGLnAzIXcIJSXOgyhHE5OS/d68/jsb9k7b1YOK4iY6JUStwFprLJY3JnObaGzwEN5veSogfarMIsTJyhRlWAuOHgi3I7BXHzQTQfb9XPRNbewyD2pmcnu3dd0RwW3XMetA8B4/y3tPTMzJ475Nn81PPGaxpvoIzZ6xbAiUMNUzw4Ja8GpAoiLoWgpruHWXCL0LfRNgyuDBQyJwawBUhF/u+IOvOjPEM22uRJy2ywWex6Wj21yMR2+yEsDJbiitQWkJq2BrGtABFSSyFZlYWEv7qt8nbwH/9Ru54LtZoPu/bZ+oCcdm1K45Hjc9R4FZzt+hGUYSrxoaXoJfNPTqv2wQ/kdugqol1RG1ySc0yuPrqvSVNlTye5BcQBRh1i2LUQtuYbpt0reCeZas2rm09FYIjKShGc5LaVsGosjXrUsMq4JF2BXMM8QeJESnVpuN7tZkWqrefR7pHYntAttVcfb1I+vln+3ec9LrWplisvz2Gx2oncglqX+ejZX0ejaLe6NiKpoD991QVO71DzdEpW4OErnkOab/CqXuoRRC8/3+i2BNDeUZV9jiz+Vv791Rmtdw+FDM7Y7+zxdKQmHEDHPO6LV+YxkvxkWENbGY09/Dnumr3rhym9HL8aEDDRVibG612yw/7TkFlcKMFx5vKDaakdOAFFfv5ZW31u8U6ktbSGKnjMEwzjvEZ5GytAg4m5LII6/BhL+gHUZgxbUJrRnTSchO5QexvoZdw+wikf1OnL83NXcwG6B+JTXAE/w47PA9wiJXMlTEomI2pc9tb7xheixsiY/8d6n0FuqiXAW97vEyOrm8NPuxGrsA47WEbFM3qljhsIAXZC4h9wHPUCOxkULAjSCuoTf48eBPmbFanrO467Emj8ZKds8WDjkxFIVkO6qe03d/sTHdHf3O23U8IF7OE9M8B+43eeslX2Cyg1lju/VHiZADj3Z8mP2CLzztnIbJVXh7OE85r0CJfWY0eNlrxDGXXcE7tV/eC4Q+Pqf60dW9umVRDqMFfO876q5pJu17zht+ucA7vjmP8TJX2mfWC3q7g9/8AWlN6bg==" />
+
+## Let's first setup our scene (optional)


Try being more concise with titles ex:

Setting up the scene (optional)

The "let's first setup..." is a narrative for tutorials or articles. If you still want to include it do it on the paragraph but not in the title

alvarosabu · 2024-01-16T18:35:31Z

docs/examples/lights-shadows.md

+</template>
+```
+
+_Note that I intentionally did not apply `cast-shadow` to the ``Cone` so it doesn't cast any shadow_


Suggested change

_Note that I intentionally did not apply `cast-shadow` to the ``Cone` so it doesn't cast any shadow_

_Note that I intentionally did not apply `cast-shadow` to the `Cone` so it doesn't cast any shadow_

alvarosabu · 2024-01-16T18:37:49Z

docs/examples/lights-shadows.md

+_Note that I intentionally did not apply `cast-shadow` to the ``Cone` so it doesn't cast any shadow_
+
+::: warning
+The overuse of shadows in this way could drop your performance. However, there are ways to increase your performance, for more information please check out [this video](https://youtu.be/WGNvVGrS0kY?si=q7XyL5eABKUh3gbS&t=1256)


The warning feels misplaced at the end of the guide, specially because the immediate text above doesn't add context about performance.

@JaimeTorrealba please add it below Lights and shadows explanation

alvarosabu · 2024-01-16T18:46:31Z

docs/examples/lights-shadows.md

+
+There are also many types of shadows, for example the "soft shadow" is generated automatially when an object receives more light from one side, but in summary a "ThreeJS default shadow" that is directed towards another surface needs to be cast by a mesh and another mesh needs to receive it. As we see in our example, the `Plane` is receiving a shadow but not casting it. Please note that not all materials can cast or receive shadows.
+
+Internally, ThreeJS automatically generates a new mesh with a (ShadowMaterial)[https://threejs.org/docs/index.html?q=shado#api/en/materials/ShadowMaterial] which gets updated in each frame, that is why if you apply animations, the shadow also is animated, but also why you have to use shadows carefully, because they could slow your performance down.


The links format for markdown are incorrect.

JaimeTorrealba · 2024-01-26T13:43:16Z

@alvarosabu thanks for pay attention to these details, I believe we're ready, let me know

alvarosabu

@JaimeTorrealba way better now, I just added some quick suggestions for the wording of the Shadows setup, we were using the same terms everywhere, was redundant to read.

alvarosabu · 2024-01-26T14:13:57Z

docs/examples/lights-shadows.md

+
+## Setting our lights and shadow
+
+We could divide this into three steps.


Suggested change

We could divide this into three steps.

We could divide this into three steps:

alvarosabu · 2024-01-26T14:14:44Z

docs/examples/lights-shadows.md

+
+We could divide this into three steps.
+
+### Set the shadows on the renderer


Suggested change

### Set the shadows on the renderer

### Activate shadows on the renderer

alvarosabu · 2024-01-26T14:15:31Z

docs/examples/lights-shadows.md

+The overuse of shadows in this way could drop your performance. However, there are ways to increase your performance, for more information please check out [this video](https://youtu.be/WGNvVGrS0kY?si=q7XyL5eABKUh3gbS&t=1256)
+:::
+
+## Setting our lights and shadow


Suggested change

## Setting our lights and shadow

## Enabling shadows

alvarosabu · 2024-01-26T14:15:53Z

docs/examples/lights-shadows.md

+  //...
+</template>
+```
+### Set the light to cast shadow


Suggested change

### Set the light to cast shadow

### Set the light to cast shadows

JaimeTorrealba added 3 commits January 9, 2024 14:05

docs: add light-shadows and shader examples pages

86156fb

docs: update info in example, missing grammar correction

9278cb2

docs: grammar corrections

cbaa965

JaimeTorrealba requested a review from alvarosabu January 11, 2024 11:16

JaimeTorrealba self-assigned this Jan 11, 2024

JaimeTorrealba changed the title ~~Feat(app): light-shadows and shaders docs examples~~ feat(app): light-shadows and shaders docs examples Jan 11, 2024

JaimeTorrealba changed the title ~~feat(app): light-shadows and shaders docs examples~~ docs(app): light-shadows and shaders docs examples Jan 11, 2024

alvarosabu requested changes Jan 12, 2024

View reviewed changes

docs/examples/shaders.md Show resolved Hide resolved

docs/examples/shaders.md Outdated Show resolved Hide resolved

docs/examples/shaders.md Show resolved Hide resolved

docs/.vitepress/config.ts Outdated Show resolved Hide resolved

docs/.vitepress/config.ts Outdated Show resolved Hide resolved

JaimeTorrealba added 2 commits January 12, 2024 17:26

docs(app): fix indentation

b9d185f

docs(app): fix title section names, add message as warning

e35ddfa

JaimeTorrealba requested a review from alvarosabu January 12, 2024 17:29

alvarosabu approved these changes Jan 16, 2024

View reviewed changes

Merge branch 'main' into feature-476-light-shadows-shaders-examples

3566535

alvarosabu requested changes Jan 16, 2024

View reviewed changes

JaimeTorrealba added 3 commits January 26, 2024 12:11

docs(app): feature-476 Apply reviews feedback

dabb2e5

docs(app): Fix markdown links

d154ff9

Merge branch 'main' into feature-476-light-shadows-shaders-examples

185480a

alvarosabu requested changes Jan 26, 2024

View reviewed changes

JaimeTorrealba and others added 2 commits January 26, 2024 17:09

docs(app): feature-476 Improve titles, and remove redundan shadow word

7dcbc0b

Merge branch 'main' into feature-476-light-shadows-shaders-examples

85b4392

alvarosabu merged commit 7af155c into main Jan 27, 2024


		We could divide this into three steps.

		Number 1: Set the shadows on the renderer

	Number 1: Set the shadows on the renderer
	### Set the shadows on the renderer

	Number 2: Set the light to cast shadow
	### Set the light to cast shadow

	Number 3: Set the objects to cast or receive shadows
	### Set the objects to cast or receive shadows

	_Note that I intentionally did not apply `cast-shadow` to the ``Cone` so it doesn't cast any shadow_
	_Note that I intentionally did not apply `cast-shadow` to the `Cone` so it doesn't cast any shadow_


		There are also many types of shadows, for example the "soft shadow" is generated automatially when an object receives more light from one side, but in summary a "ThreeJS default shadow" that is directed towards another surface needs to be cast by a mesh and another mesh needs to receive it. As we see in our example, the `Plane` is receiving a shadow but not casting it. Please note that not all materials can cast or receive shadows.

		Internally, ThreeJS automatically generates a new mesh with a (ShadowMaterial)[https://threejs.org/docs/index.html?q=shado#api/en/materials/ShadowMaterial] which gets updated in each frame, that is why if you apply animations, the shadow also is animated, but also why you have to use shadows carefully, because they could slow your performance down.


		## Setting our lights and shadow

		We could divide this into three steps.

	We could divide this into three steps.
	We could divide this into three steps:

	### Set the shadows on the renderer
	### Activate shadows on the renderer

	### Set the light to cast shadow
	### Set the light to cast shadows

Uh oh!

docs(app): light-shadows and shaders docs examples #506

docs(app): light-shadows and shaders docs examples #506

Uh oh!

Conversation

JaimeTorrealba commented Jan 11, 2024

Uh oh!

netlify bot commented Jan 11, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for tresjs-docs ready!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

alvarosabu left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Setting up the scene (optional)

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

JaimeTorrealba commented Jan 26, 2024

Uh oh!

alvarosabu left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

netlify bot commented Jan 11, 2024 •

edited

Loading