To map a texture to your geometry, use loadImage() within preload(), then call texture() before drawing your shape. These textures can be imported from an image and can even be generated within code using shaders. In short, these are images that can be mapped onto the surface of a geometry. More custom materials can be achieved through using texture(). Try commenting and uncommenting the different lights in this example: You can move your mouse and see the effect that a directional light has on the material. In this interactive example, try selecting each of the different materials to see how they affect the appearance of the geometry. Materials can be varied, making objects shiny, rough, or even textured with images. Materials dictate how light interacts with the geometry and how color (or texture) gets applied to the object. Objects can appear differently based on their material. In this next example, try commenting and uncommenting each light and experiment with their parameters. For each active light source there are visual indicators of their position or direction, just know that these are here for illustrative purposes! Try checking and unchecking the boxes in the following interactive example to see how lighting can be blended together. Up to 5 lights can be used in a scene simultaneously, allowing you to compose a scene with varied and complex lighting sources. These lights should be used within draw(). This can be useful when you want flat, unshaded geometry. noLights() noLights() makes it so that all subsequent geometry is rendered without any lighting. This light is cast in a conical shape and it's radius and concentration can be adjusted. spotLight() A spot light emits from a single point in a single direction. This method accepts a color and a position for the light. pointLight() A point light emits from a single point in all directions, similar to something like a lightbulb. This method accepts a color and direction. directionalLight() A directional light shines from one direction, which can be especially useful for communicating depth in a scene, or when a scene needs a 'sun' light. ambientLight() Ambient light makes everything display a little brighter, with no consideration for light position or direction. p5.js has a few different types of light that can be used in a sketch. To be able to convey shape and depth in 3D is necessary to have a light source. Lighting is another essential part of a 3D scene. camera() can be used to change the position of the active camera and the position that the camera is looking at. Sketches in p5.js will default to having a single perspective camera, but that can be changed by calling either perspective() p5.js has a special camera method, orbitControl(), that can be used to zoom, pan, and position the camera using the mouse.Ī scene can have multiple cameras, but only one camera can be active at a time. This process of selectively including geometry is sometimes referred to as 'clipping'.Ĭameras can be moved by passing arguments to camera(), but constantly moving and adjusting the camera in code can be tedious, especially when you are experimenting with ideas. Each of these can be changed to affect how close and how far the camera can see. The far plane defines the maximum distance that the geometry can be from the camera. The near plane defines the minimum distance that geometry must be from the camera to be rendered. The frustum includes a near and far plane. The frustum of the camera is the shape of the camera's view, a pyramid-like shape within which geometry can be displayed. In simple examples it might appear to have a zoom-like effect, but it also affects the way that shapes change size in the distance.Īnother important term when working with cameras in 3D is the camera frustum. This is the term that is used to describe how much our camera can see, measured as an angle. One setting that we can change with a perspective camera is the field-of-view, or FOV. This is in contrast to an orthographic camera, where the geometry stays the same size as it gets further away and has no vanishing point. In p5.js, the WebGL mode provides us with a perspective camera by default, but we can change this using perspective() or ortho().Ī perspective camera skews objects so they appear to get smaller as they get further away, vanishing at a single point in the distance. The camera is an essential piece of a 3D scene it gives us the sense of space and dimension that we are often looking for in 3D.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |