How to use the ShaderMaterial function from three
Find comprehensive JavaScript three.ShaderMaterial code examples handpicked from public code repositorys.
GitHub: RichardLitt/webui
![RichardLitt profile picture](/RichardLitt.png?size=40)
123 124 125 126 127 128 129 130 131
shader = Shaders['earth'] uniforms = THREE.UniformsUtils.clone(shader.uniforms) uniforms['texture'].value = THREE.ImageUtils.loadTexture(imgDir + 'world.jpg') material = new THREE.ShaderMaterial({ uniforms: uniforms, vertexShader: shader.vertexShader, fragmentShader: shader.fragmentShader
GitHub: edankwan/The-Spirit
![edankwan profile picture](/edankwan.png?size=40)
52 53 54 55 56 57 58 59 60 61
position[i3 + 1] = ~~(i / TEXTURE_WIDTH) / TEXTURE_HEIGHT; } var geometry = new THREE.BufferGeometry(); geometry.addAttribute( 'position', new THREE.BufferAttribute( position, 3 )); var material = new THREE.ShaderMaterial({ uniforms: THREE.UniformsUtils.merge([ THREE.UniformsLib.shadowmap, { texturePosition: { type: 't', value: undef },
+ 7 other calls in file
56 57 58 59 60 61 62 63 64 65
return new Promise((resolve) => { const jitterOffsets = JitterVectors[Math.max(0, Math.min(sampleLevel, 5))]; const {autoClear} = renderer; const copyShader = THREE.CopyShader; const copyUniforms = THREE.UniformsUtils.clone(copyShader.uniforms); const copyMaterial = new THREE.ShaderMaterial({ uniforms: copyUniforms, vertexShader: copyShader.vertexShader, fragmentShader: copyShader.fragmentShader, premultipliedAlpha: true,
57 58 59 60 61 62 63 64 65 66
texture.magFilter = THREE.LinearFilter; texture.wrapT = THREE.ClampToEdgeWrapping; texture.wrapS = THREE.ClampToEdgeWrapping; texture.needsUpdate = true; const material = new THREE.ShaderMaterial({ uniforms: { opacity: {value: config.opacity}, low: {value: colorRange[0]}, high: {value: colorRange[1]},
GitHub: K3D-tools/K3D-jupyter
211 212 213 214 215 216 217 218 219 220
*/ if (config.shadow !== 'off') { sceneRTT = new THREE.Scene(); quadRTT = new THREE.Mesh( new THREE.PlaneBufferGeometry(lightMapRenderTargetSize, lightMapRenderTargetSize), new THREE.ShaderMaterial({ uniforms: _.merge( uniforms, THREE.UniformsLib.lights, {
+ 3 other calls in file
GitHub: fluuuid/labs
![fluuuid profile picture](/fluuuid.png?size=40)
46 47 48 49 50 51 52 53 54 55
// uniforms: uniforms, // vertexShader: shader.vertexShader, // fragmentShader: shader.fragmentShader, }); // material = new THREE.ShaderMaterial({ // uniforms: uniforms, // vertexShader: shader.vertexShader, // fragmentShader: shader.fragmentShader, // });
GitHub: typpo/spacekit
103 104 105 106 107 108 109 110 111 112
geometry.setDrawRange(0, 0); Object.keys(this.attributes).forEach(function (attributeName) { var attribute = _this.attributes[attributeName]; geometry.setAttribute(attributeName, attribute); }); var shader = new THREE.ShaderMaterial({ uniforms: this.uniforms, vertexShader: (0, shaders_1.getOrbitShaderVertex)(), fragmentShader: (0, shaders_1.getOrbitShaderFragment)(), depthTest: true,
GitHub: umamiMike/Constraint
![umamiMike profile picture](/umamiMike.png?size=40)
69 70 71 72 73 74 75 76 77 78
transparent: false, depthWrite: false, depthTest: false }); _positionShader = new THREE.ShaderMaterial({ uniforms: { resolution: { type: 'v2', value: new THREE.Vector2( TEXTURE_SIZE, TEXTURE_SIZE ) }, texturePosition: { type: 't', value: null }, textureVelocity: { type: 't', value: null },
+ 5 other calls in file
GitHub: hobuinc/usgs-lidar
443 444 445 446 447 448 449 450 451 452
zrange: { type: 'v2', value: new THREE.Vector2(0, 0) }, offsets: { type: 'v3', value: new THREE.Vector3(0, 0, 0) }, which: { type: 'v3', value: new THREE.Vector3(0, 0, 0) } }; this.mat = new THREE.ShaderMaterial({ blending: THREE.CustomBlending, blendSrc: THREE.OneFactor, blendDst: THREE.ZeroFactor, /*jshint multistr: true */
GitHub: edankwan/touch-leap-motion
![edankwan profile picture](/edankwan.png?size=40)
48 49 50 51 52 53 54 55 56 57
_fboScene = new THREE.Scene(); _fboCamera = new THREE.Camera(); _fboCamera.position.z = 1; _copyShader = new THREE.ShaderMaterial({ uniforms: { resolution: { type: 'v2', value: new THREE.Vector2( settings.simulatorTextureWidth, settings.simulatorTextureHeight ) }, texture: { type: 't', value: null } },
+ 5 other calls in file
GitHub: avin/generative
![avin profile picture](/avin.png?size=40)
31 32 33 34 35 36 37 38 39 40
return material; } function createFloorMaterial() { return new THREE.ShaderMaterial({ uniforms: { iTime: { value: 0.0 }, iResolution: new THREE.Uniform(new THREE.Vector2(2000, 2000)), },
+ 17 other calls in file
GitHub: bengler/terrafab
![bengler profile picture](/bengler.png?size=40)
10 11 12 13 14 15 16 17 18 19
this.textureID = ( textureID !== undefined ) ? textureID : "tDiffuse"; this.uniforms = THREE.UniformsUtils.clone( shader.uniforms ); this.material = new THREE.ShaderMaterial( { uniforms: this.uniforms, vertexShader: shader.vertexShader, fragmentShader: shader.fragmentShader
+ 11 other calls in file
281 282 283 284 285 286 287 288 289 290 291
return new THREE.Vector3(center.x, center.y, z); } function applySemiTransparentShader(object, color) { object.traverse(child => { child.material = new THREE.ShaderMaterial({ uniforms: { color: { type: "c", value: new THREE.Color(`${color}`) } }, vertexShader: `
+ 11 other calls in file
49 50 51 52 53 54 55 56 57 58
featherOrientation: 0.0, //increase curvature of individual feathers 1 to 10 flappingSpeed: 1.0, //0 to 10 flappingMotion: 2.7 //change orientation of entire wing 0 to 1 } var feather_Material = new THREE.ShaderMaterial({ uniforms: { feathercolor: {
+ 11 other calls in file
47 48 49 50 51 52 53 54 55 56
numberOfLayers: 2, connectivity: 0.61 } //material for slab below mountains var slabMat = new THREE.ShaderMaterial({ uniforms: { albedo: {
+ 3 other calls in file
GitHub: zeesaas/Three-MapGL
![zeesaas profile picture](/zeesaas.png?size=40)
64 65 66 67 68 69 70 71 72 73
let extrudeGeo = this.createExtrudeGeometry(shape) geo.fromBufferGeometry(extrudeGeo) geo.translate(-290, -214, 0) let mat if (isScience) { mat = new THREE.ShaderMaterial({ uniforms: { "s": { type: "f", value: -2.0}, "b": { type: "f", value: 0.6}, "p": { type: "f", value: 1.0 },
+ 7 other calls in file
126 127 128 129 130 131 132 133 134 135
color: 0x000000, // shading: THREE.FlatShading, transparent: false, }), vertexContour: new THREE.ShaderMaterial( { uniforms: { color: { value: new THREE.Color( 0xcccccc )
GitHub: audunsh/evince
120 121 122 123 124 125 126 127 128
let baseGeometry = new THREE.SphereBufferGeometry(.3); //let baseGeometry = new THREE.BoxBufferGeometry(1.0,1.0,1.0); let instancedGeometry = new THREE.InstancedBufferGeometry().copy(baseGeometry); let instanceCount = this.state.length; instancedGeometry.maxInstancedCount = instanceCount; //let material = new THREE.ShaderMaterial(); //let mesh = new THREE.Mesh(instancedGeometry, material);
+ 3 other calls in file
582 583 584 585 586 587 588 589 590 591
"envMapIntensity", "refractionRatio", ], getMaterialType: function () { return THREE.ShaderMaterial; }, extendParams: function (materialParams, materialDef, parser) { var pbrSpecularGlossiness = materialDef.extensions[this.name];
+ 29 other calls in file
759 760 761 762 763 764 765 766 767 768
console.error( 'THREE.SAOPass relies on THREE.SAOShader' ); } this.saoMaterial = new THREE.ShaderMaterial( { defines: Object.assign( {}, THREE.SAOShader.defines ), fragmentShader: THREE.SAOShader.fragmentShader, vertexShader: THREE.SAOShader.vertexShader, uniforms: THREE.UniformsUtils.clone( THREE.SAOShader.uniforms )
+ 143 other calls in file
three.Vector3 is the most popular function in three (22341 examples)