three#ShaderLib JavaScript Examples
The following examples show how to use
three#ShaderLib.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: CubeTexturePass.js From threejs-tutorial with MIT License | 6 votes |
|
CubeTexturePass = function (camera, envMap, opacity) {
Pass.call(this);
this.camera = camera;
this.needsSwap = false;
this.cubeShader = ShaderLib["cube"];
this.cubeMesh = new Mesh(
new BoxBufferGeometry(10, 10, 10),
new ShaderMaterial({
uniforms: this.cubeShader.uniforms,
vertexShader: this.cubeShader.vertexShader,
fragmentShader: this.cubeShader.fragmentShader,
depthTest: false,
depthWrite: false,
side: BackSide,
})
);
Object.defineProperty(this.cubeMesh.material, "envMap", {
get: function () {
return this.uniforms.envMap.value;
},
});
this.envMap = envMap;
this.opacity = opacity !== undefined ? opacity : 1.0;
this.cubeScene = new Scene();
this.cubeCamera = new PerspectiveCamera();
this.cubeScene.add(this.cubeMesh);
}
Example #2
| Source File: CubeTexturePass.js From Computer-Graphics with MIT License | 6 votes |
|
constructor( camera, envMap, opacity = 1 ) {
super();
this.camera = camera;
this.needsSwap = false;
this.cubeShader = ShaderLib[ 'cube' ];
this.cubeMesh = new Mesh(
new BoxGeometry( 10, 10, 10 ),
new ShaderMaterial( {
uniforms: UniformsUtils.clone( this.cubeShader.uniforms ),
vertexShader: this.cubeShader.vertexShader,
fragmentShader: this.cubeShader.fragmentShader,
depthTest: false,
depthWrite: false,
side: BackSide
} )
);
Object.defineProperty( this.cubeMesh.material, 'envMap', {
get: function () {
return this.uniforms.envMap.value;
}
} );
this.envMap = envMap;
this.opacity = opacity;
this.cubeScene = new Scene();
this.cubeCamera = new PerspectiveCamera();
this.cubeScene.add( this.cubeMesh );
}
Example #3
| Source File: MMDToonShader.js From Computer-Graphics with MIT License | 5 votes |
|
MMDToonShader = {
defines: {
TOON: true,
MATCAP: true,
MATCAP_BLENDING_ADD: true,
},
uniforms: UniformsUtils.merge( [
ShaderLib.toon.uniforms,
ShaderLib.phong.uniforms,
ShaderLib.matcap.uniforms,
] ),
vertexShader: ShaderLib.phong.vertexShader,
fragmentShader:
ShaderLib.phong.fragmentShader
.replace(
'#include <common>',
`
#ifdef USE_MATCAP
uniform sampler2D matcap;
#endif
#include <common>
`
)
.replace(
'#include <envmap_common_pars_fragment>',
`
#include <gradientmap_pars_fragment>
#include <envmap_common_pars_fragment>
`
)
.replace(
'#include <lights_phong_pars_fragment>',
lights_mmd_toon_pars_fragment
)
.replace(
'#include <envmap_fragment>',
`
#include <envmap_fragment>
${mmd_toon_matcap_fragment}
`
),
}
Example #4
| Source File: SubsurfaceScatteringShader.js From Computer-Graphics with MIT License | 5 votes |
|
SubsurfaceScatteringShader = {
uniforms: UniformsUtils.merge( [
ShaderLib[ 'phong' ].uniforms,
{
'thicknessMap': { value: null },
'thicknessColor': { value: new Color( 0xffffff ) },
'thicknessDistortion': { value: 0.1 },
'thicknessAmbient': { value: 0.0 },
'thicknessAttenuation': { value: 0.1 },
'thicknessPower': { value: 2.0 },
'thicknessScale': { value: 10.0 }
}
] ),
vertexShader: [
'#define USE_UV',
ShaderChunk[ 'meshphong_vert' ],
].join( '\n' ),
fragmentShader: [
'#define USE_UV',
'#define SUBSURFACE',
meshphong_frag_head,
'uniform sampler2D thicknessMap;',
'uniform float thicknessPower;',
'uniform float thicknessScale;',
'uniform float thicknessDistortion;',
'uniform float thicknessAmbient;',
'uniform float thicknessAttenuation;',
'uniform vec3 thicknessColor;',
'void RE_Direct_Scattering(const in IncidentLight directLight, const in vec2 uv, const in GeometricContext geometry, inout ReflectedLight reflectedLight) {',
' vec3 thickness = thicknessColor * texture2D(thicknessMap, uv).r;',
' vec3 scatteringHalf = normalize(directLight.direction + (geometry.normal * thicknessDistortion));',
' float scatteringDot = pow(saturate(dot(geometry.viewDir, -scatteringHalf)), thicknessPower) * thicknessScale;',
' vec3 scatteringIllu = (scatteringDot + thicknessAmbient) * thickness;',
' reflectedLight.directDiffuse += scatteringIllu * thicknessAttenuation * directLight.color;',
'}',
meshphong_frag_body.replace( '#include <lights_fragment_begin>',
replaceAll(
ShaderChunk[ 'lights_fragment_begin' ],
'RE_Direct( directLight, geometry, material, reflectedLight );',
[
'RE_Direct( directLight, geometry, material, reflectedLight );',
'#if defined( SUBSURFACE ) && defined( USE_UV )',
' RE_Direct_Scattering(directLight, vUv, geometry, reflectedLight);',
'#endif',
].join( '\n' )
),
),
].join( '\n' ),
}
Example #5
| Source File: LineMaterial.js From BlueMapWeb with MIT License | 4 votes |
|
LineMaterial = function ( parameters ) {
ShaderMaterial.call( this, {
type: 'LineMaterial',
uniforms: UniformsUtils.clone( ShaderLib[ 'line' ].uniforms ),
vertexShader: ShaderLib[ 'line' ].vertexShader,
fragmentShader: ShaderLib[ 'line' ].fragmentShader,
clipping: true // required for clipping support
} );
this.dashed = false;
Object.defineProperties( this, {
color: {
enumerable: true,
get: function () {
return this.uniforms.diffuse.value;
},
set: function ( value ) {
this.uniforms.diffuse.value = value;
}
},
linewidth: {
enumerable: true,
get: function () {
return this.uniforms.linewidth.value;
},
set: function ( value ) {
this.uniforms.linewidth.value = value;
}
},
dashScale: {
enumerable: true,
get: function () {
return this.uniforms.dashScale.value;
},
set: function ( value ) {
this.uniforms.dashScale.value = value;
}
},
dashSize: {
enumerable: true,
get: function () {
return this.uniforms.dashSize.value;
},
set: function ( value ) {
this.uniforms.dashSize.value = value;
}
},
gapSize: {
enumerable: true,
get: function () {
return this.uniforms.gapSize.value;
},
set: function ( value ) {
this.uniforms.gapSize.value = value;
}
},
opacity: {
enumerable: true,
get: function () {
return this.uniforms.opacity.value;
},
set: function ( value ) {
this.uniforms.opacity.value = value;
}
},
resolution: {
enumerable: true,
get: function () {
return this.uniforms.resolution.value;
},
set: function ( value ) {
this.uniforms.resolution.value.copy( value );
}
}
} );
this.setValues( parameters );
}
Example #6
| Source File: LineMaterial.js From BlueMapWeb with MIT License | 4 votes |
|
ShaderLib[ 'line' ] = {
uniforms: UniformsUtils.merge( [
UniformsLib.common,
UniformsLib.fog,
UniformsLib.line
] ),
vertexShader:
`
#include <common>
#include <color_pars_vertex>
#include <fog_pars_vertex>
#include <logdepthbuf_pars_vertex>
#include <clipping_planes_pars_vertex>
uniform float linewidth;
uniform vec2 resolution;
attribute vec3 instanceStart;
attribute vec3 instanceEnd;
attribute vec3 instanceColorStart;
attribute vec3 instanceColorEnd;
varying vec2 vUv;
varying float vDistance;
#ifdef USE_DASH
uniform float dashScale;
attribute float instanceDistanceStart;
attribute float instanceDistanceEnd;
varying float vLineDistance;
#endif
void trimSegment( const in vec4 start, inout vec4 end ) {
// trim end segment so it terminates between the camera plane and the near plane
// conservative estimate of the near plane
float a = projectionMatrix[ 2 ][ 2 ]; // 3nd entry in 3th column
float b = projectionMatrix[ 3 ][ 2 ]; // 3nd entry in 4th column
float nearEstimate = - 0.5 * b / a;
float alpha = ( nearEstimate - start.z ) / ( end.z - start.z );
end.xyz = mix( start.xyz, end.xyz, alpha );
}
void main() {
#ifdef USE_COLOR
vColor.xyz = ( position.y < 0.5 ) ? instanceColorStart : instanceColorEnd;
#endif
#ifdef USE_DASH
vLineDistance = ( position.y < 0.5 ) ? dashScale * instanceDistanceStart : dashScale * instanceDistanceEnd;
#endif
float aspect = resolution.x / resolution.y;
vUv = uv;
// camera space
vec4 start = modelViewMatrix * vec4( instanceStart, 1.0 );
vec4 end = modelViewMatrix * vec4( instanceEnd, 1.0 );
// special case for perspective projection, and segments that terminate either in, or behind, the camera plane
// clearly the gpu firmware has a way of addressing this issue when projecting into ndc space
// but we need to perform ndc-space calculations in the shader, so we must address this issue directly
// perhaps there is a more elegant solution -- WestLangley
bool perspective = ( projectionMatrix[ 2 ][ 3 ] == - 1.0 ); // 4th entry in the 3rd column
if ( perspective ) {
if ( start.z < 0.0 && end.z >= 0.0 ) {
trimSegment( start, end );
} else if ( end.z < 0.0 && start.z >= 0.0 ) {
trimSegment( end, start );
}
}
// clip space
vec4 clipStart = projectionMatrix * start;
vec4 clipEnd = projectionMatrix * end;
// ndc space
vec2 ndcStart = clipStart.xy / clipStart.w;
vec2 ndcEnd = clipEnd.xy / clipEnd.w;
// direction
vec2 dir = ndcEnd - ndcStart;
// account for clip-space aspect ratio
dir.x *= aspect;
dir = normalize( dir );
// perpendicular to dir
vec2 offset = vec2( dir.y, - dir.x );
// undo aspect ratio adjustment
dir.x /= aspect;
offset.x /= aspect;
// sign flip
if ( position.x < 0.0 ) offset *= - 1.0;
// endcaps
if ( position.y < 0.0 ) {
offset += - dir;
} else if ( position.y > 1.0 ) {
offset += dir;
}
// adjust for linewidth
offset *= linewidth;
// adjust for clip-space to screen-space conversion // maybe resolution should be based on viewport ...
offset /= resolution.y;
// select end
vec4 clip = ( position.y < 0.5 ) ? clipStart : clipEnd;
// back to clip space
offset *= clip.w;
clip.xy += offset;
gl_Position = clip;
vec4 mvPosition = ( position.y < 0.5 ) ? start : end; // this is an approximation
vDistance = -mvPosition.z;
#include <logdepthbuf_vertex>
#include <clipping_planes_vertex>
#include <fog_vertex>
}
`,
fragmentShader:
`
#define FLT_MAX 3.402823466e+38
uniform vec3 diffuse;
uniform float opacity;
uniform float fadeDistanceMax;
uniform float fadeDistanceMin;
#ifdef USE_DASH
uniform float dashSize;
uniform float gapSize;
#endif
varying float vLineDistance;
#include <common>
#include <color_pars_fragment>
#include <fog_pars_fragment>
#include <logdepthbuf_pars_fragment>
#include <clipping_planes_pars_fragment>
varying vec2 vUv;
varying float vDistance;
void main() {
#include <clipping_planes_fragment>
#ifdef USE_DASH
if ( vUv.y < - 1.0 || vUv.y > 1.0 ) discard; // discard endcaps
if ( mod( vLineDistance, dashSize + gapSize ) > dashSize ) discard; // todo - FIX
#endif
if ( abs( vUv.y ) > 1.0 ) {
float a = vUv.x;
float b = ( vUv.y > 0.0 ) ? vUv.y - 1.0 : vUv.y + 1.0;
float len2 = a * a + b * b;
if ( len2 > 1.0 ) discard;
}
// distance fading
float fdMax = FLT_MAX;
if ( fadeDistanceMax > 0.0 ) fdMax = fadeDistanceMax;
float minDelta = (vDistance - fadeDistanceMin) / fadeDistanceMin;
float maxDelta = (vDistance - fadeDistanceMax) / (fadeDistanceMax * 0.5);
float distanceOpacity = min(
clamp(minDelta, 0.0, 1.0),
1.0 - clamp(maxDelta + 1.0, 0.0, 1.0)
);
vec4 diffuseColor = vec4( diffuse, opacity * distanceOpacity );
#include <logdepthbuf_fragment>
#include <color_fragment>
gl_FragColor = vec4( diffuseColor.rgb, diffuseColor.a );
#include <tonemapping_fragment>
#include <encodings_fragment>
#include <fog_fragment>
#include <premultiplied_alpha_fragment>
}
`
};
Example #7
| Source File: b3dmExample.js From 3DTilesRendererJS with Apache License 2.0 | 4 votes |
|
function init() {
infoEl = document.getElementById( 'info' );
scene = new Scene();
// primary camera view
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0x151c1f );
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = PCFSoftShadowMap;
renderer.outputEncoding = sRGBEncoding;
document.body.appendChild( renderer.domElement );
camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 4000 );
camera.position.set( 400, 400, 400 );
// controls
controls = new OrbitControls( camera, renderer.domElement );
controls.screenSpacePanning = false;
controls.minDistance = 1;
controls.maxDistance = 2000;
// lights
dirLight = new DirectionalLight( 0xffffff, 1.25 );
dirLight.position.set( 1, 2, 3 ).multiplyScalar( 40 );
dirLight.castShadow = true;
dirLight.shadow.bias = - 0.01;
dirLight.shadow.mapSize.setScalar( 2048 );
const shadowCam = dirLight.shadow.camera;
shadowCam.left = - 200;
shadowCam.bottom = - 200;
shadowCam.right = 200;
shadowCam.top = 200;
shadowCam.updateProjectionMatrix();
scene.add( dirLight );
const ambLight = new AmbientLight( 0xffffff, 0.05 );
scene.add( ambLight );
offsetGroup = new Group();
scene.add( offsetGroup );
new B3DMLoader()
.load( 'https://raw.githubusercontent.com/CesiumGS/3d-tiles-samples/main/1.0/TilesetWithRequestVolume/city/lr.b3dm' )
.then( res => {
console.log( res );
model = res.scene;
offsetGroup.add( model );
const box = new Box3();
box.setFromObject( model );
box.getCenter( offsetGroup.position ).multiplyScalar( - 1 );
// reassign the material to use the batchid highlight variant.
// in practice this should copy over any needed uniforms from the
// original material.
model.traverse( c => {
if ( c.isMesh ) {
c.material = new ShaderMaterial( batchIdHighlightShaderMixin( ShaderLib.standard ) );
}
} );
} );
raycaster = new Raycaster();
mouse = new Vector2();
onWindowResize();
window.addEventListener( 'resize', onWindowResize, false );
renderer.domElement.addEventListener( 'mousemove', onMouseMove, false );
}
