I am trying to enable fog in my custom shader. I would assume that shaderMaterial automatically passes down global fog variables but couldn't find any documentation. I did look at the posts for plain Three.js but couldn't manage to map the solutions to the react-three/drei shaderMaterial. Any help would be greatly appreciated.
Related
Three.js has good set of Effectcomposers post processing and via shaderpass we can add any GLSL shader. But PixiJS has even great list of filters. Is there some direct way to copy these filters as GLSL code to shaderpass of three.js. Unfortunately these filters are embed deep with uniforms and there appears no simple way to copy these filters in three.js
My question refers to newest version 80 of Three.js.
I am using custom ShaderMaterial with lights and I want to incorporate shadows to the scene. I have followed this tutorial by Edan Kwan.
Unfortunately in rev 80 there is no longer ShaderChunk(shadowmap_fragment) available. I noticed that there is separate ShadowMaterial created (src/materials/ShadowMaterial.js ) but I don't know how to use it with my shader material. Could anyone advise how to use it? Thank you.
I'm currently working on something along the lines of a plugin for another program to add 3D capability to it, so I'm trying to put all the functionality i can from three.js into it, with the added goal of this being a good way to learn all the functionality of three.js firsthand.
I'm running into an issue now as i implement textures and materials that with mesh basic material, setting some things which the documentation on the main threejs.org site shows are features, doesn't actually do anything.
when i set a texture for either specularmap or lightmap nothing is actually showing up. Im pretty sure its not a mistake im making because setting the texture of the map works, but trying to set this same texture for the specularMap or lightMap is doing nothing. Does a regular texture work for these, or do i have to do something different?
I'd also like to know what the shading property does for mesh basic, because as far as i can see setting it to smoothshading/flatshading/noshading is doing nothing aswell.
MeshBasicMaterial does not respond to lights. Change your material to MeshLamberMaterial or MeshPhongMaterial, for example.
For MeshBasicMaterial and MeshLambertMaterial, the specularMap is used only to modulate the reflection when an environment map is used.
For any material, lightmaps require a second set of UVs. geometry.faceVertexUvs[ 0 ] contains the usual set of UVs; for a lightmap, you need to add geometry.faceVertexUvs[ 1 ], a second set of UVs.
For MeshBasicMaterial, the shading property only applies when an environment map is used. SmoothShading will yield smooth reflections; FlatShading will yield faceted reflections.
three.js r.66
I'm creating terrain editor with three.js and i have encountered few problems.
First. Shadows renders on MeshLambertMaterial, but it wont on ShaderMaterial.
Second. How to change object's material (from lambert to shader) on runtime?
Here's demo of my editor: http://78.62.160.169/webgl/editor/
And source code: http://78.62.160.169/webgl/editor/script.js
LambertMaterial is a built-in material, that's supported by the plugins. So shadow plugin supports rendering on the LambertMaterial, while ShaderMaterial is your own shader/material, that should manually enable shadow support, it's not set by the default.
Switching material: https://github.com/mrdoob/three.js/wiki/Updates
here is the example of ShaderMaterial with shadow and fog
https://gist.github.com/wmcmurray/6696fc95f25bbd2401d72a74e9493261
or you can also rewrite a shader from LambertMaterial or other,
make it support your own shader
I am trying to simulate the OpenGL flat shading model using Three.js. My idea is creating an example like http://en.wikipedia.org/wiki/File:Phong-shading-sample.jpg. I was trying to change some different shading models but I cannot obtain the desired result.
Is it possible to create this scene in three.js?
Thanks in advance
Materials e.g. the MeshBasicMaterial have an option called "shading". It can be set to THREE.None, THREE.FlatShading, THREE.SmoothShading.
I am not sure if you need a light source in the first place or wether you have to enable shading for a the whole scene. Look at the demos at the Three.js website for something with shading.