diff --git a/editor/css/dark.css b/editor/css/dark.css index 1ee91e00031f6625a96034c9010fddff65484105..45229ad529fec9b19dfb3592d273ee924347a3a9 100644 --- a/editor/css/dark.css +++ b/editor/css/dark.css @@ -70,8 +70,8 @@ input.Number { } #menubar .menu .options { - display: none; position: absolute; + display: none; padding: 5px 0px; background: #111; width: 140px; diff --git a/editor/css/light.css b/editor/css/light.css index 80787338f4afcda65d3a21aedac1ecb1eec4ebba..96d614b4a2e47ce267b9cc439c09556ba1a5e636 100644 --- a/editor/css/light.css +++ b/editor/css/light.css @@ -71,8 +71,8 @@ input.Number { } #menubar .menu .options { - display: none; position: absolute; + display: none; padding: 5px 0px; background: #eee; width: 140px; diff --git a/examples/index.html b/examples/index.html index 980d99a34d5a22595a0b5a4790c0c830b1c73cfc..c439c7aa30cf55cb0a9471b83a7ee6ab02fd6452 100644 --- a/examples/index.html +++ b/examples/index.html @@ -215,6 +215,7 @@ "webgl_materials_lightmap", "webgl_materials_normalmap", "webgl_materials_normalmap2", + "webgl_materials_parallaxmap", "webgl_materials_shaders_fresnel", "webgl_materials_skin", "webgl_materials_texture_anisotropy", diff --git a/examples/js/exporters/SceneExporter.js b/examples/js/exporters/SceneExporter.js index d829bd189ec94432e26ed1ae3f2ffe13d42d4973..296aaa618c282762ace07ee7fbc20259ec8aad38 100644 --- a/examples/js/exporters/SceneExporter.js +++ b/examples/js/exporters/SceneExporter.js @@ -371,9 +371,9 @@ THREE.SceneExporter.prototype = { '\t' + LabelString( getGeometryName( g ) ) + ': {', ' "type" : "sphere",', - ' "radius" : ' + g.radius + ',', - ' "widthSegments" : ' + g.widthSegments + ',', - ' "heightSegments" : ' + g.heightSegments, + ' "radius" : ' + g.parameters.radius + ',', + ' "widthSegments" : ' + g.parameters.widthSegments + ',', + ' "heightSegments" : ' + g.parameters.heightSegments, '}' ]; @@ -384,9 +384,9 @@ THREE.SceneExporter.prototype = { '\t' + LabelString( getGeometryName( g ) ) + ': {', ' "type" : "cube",', - ' "width" : ' + g.width + ',', - ' "height" : ' + g.height + ',', - ' "depth" : ' + g.depth + ',', + ' "width" : ' + g.parameters.width + ',', + ' "height" : ' + g.parameters.height + ',', + ' "depth" : ' + g.parameters.depth + ',', ' "widthSegments" : ' + g.widthSegments + ',', ' "heightSegments" : ' + g.heightSegments + ',', ' "depthSegments" : ' + g.depthSegments, diff --git a/examples/js/shaders/ParallaxShader.js b/examples/js/shaders/ParallaxShader.js new file mode 100644 index 0000000000000000000000000000000000000000..b7412eff68a6bae02ea5437e794a224603039427 --- /dev/null +++ b/examples/js/shaders/ParallaxShader.js @@ -0,0 +1,182 @@ +// Parallax Occlusion shaders from +// http://sunandblackcat.com/tipFullView.php?topicid=28 +// No tangent-space transforms logic based on +// http://mmikkelsen3d.blogspot.sk/2012/02/parallaxpoc-mapping-and-no-tangent.html + +THREE.ParallaxShader = { + // Ordered from fastest to best quality. + modes: { + none: 'NO_PARALLAX', + basic: 'USE_BASIC_PARALLAX', + steep: 'USE_STEEP_PARALLAX', + occlusion: 'USE_OCLUSION_PARALLAX', // a.k.a. POM + relief: 'USE_RELIEF_PARALLAX', + }, + + uniforms: { + "bumpMap": { type: "t", value: null }, + "map": { type: "t", value: null }, + "parallaxScale": { type: "f", value: null }, + "parallaxMinLayers": { type: "f", value: null }, + "parallaxMaxLayers": { type: "f", value: null } + }, + + vertexShader: [ + "varying vec2 vUv;", + "varying vec3 vViewPosition;", + "varying vec3 vNormal;", + + "void main() {", + + "vUv = uv;", + "vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );", + "vViewPosition = -mvPosition.xyz;", + "vNormal = normalize( normalMatrix * normal );", + "gl_Position = projectionMatrix * mvPosition;", + + "}" + + ].join( "\n" ), + + fragmentShader: [ + "uniform sampler2D bumpMap;", + "uniform sampler2D map;", + + "uniform float parallaxScale;", + "uniform float parallaxMinLayers;", + "uniform float parallaxMaxLayers;", + + "varying vec2 vUv;", + "varying vec3 vViewPosition;", + "varying vec3 vNormal;", + + "#ifdef USE_BASIC_PARALLAX", + + "vec2 parallaxMap( in vec3 V ) {", + + "float initialHeight = texture2D( bumpMap, vUv ).r;", + + // No Offset Limitting: messy, floating output at grazing angles. + //"vec2 texCoordOffset = parallaxScale * V.xy / V.z * initialHeight;", + + // Offset Limiting + "vec2 texCoordOffset = parallaxScale * V.xy * initialHeight;", + "return vUv - texCoordOffset;", + + "}", + + "#else", + + "vec2 parallaxMap( in vec3 V ) {", + + // Determine number of layers from angle between V and N + "float numLayers = mix( parallaxMaxLayers, parallaxMinLayers, abs( dot( vec3( 0.0, 0.0, 1.0 ), V ) ) );", + + "float layerHeight = 1.0 / numLayers;", + "float currentLayerHeight = 0.0;", + // Shift of texture coordinates for each iteration + "vec2 dtex = parallaxScale * V.xy / V.z / numLayers;", + + "vec2 currentTextureCoords = vUv;", + + "float heightFromTexture = texture2D( bumpMap, currentTextureCoords ).r;", + + // while ( heightFromTexture > currentLayerHeight ) + "for ( int i = 0; i == 0; i += 0 ) {", + "if ( heightFromTexture <= currentLayerHeight ) {", + "break;", + "}", + "currentLayerHeight += layerHeight;", + // Shift texture coordinates along vector V + "currentTextureCoords -= dtex;", + "heightFromTexture = texture2D( bumpMap, currentTextureCoords ).r;", + "}", + + "#ifdef USE_STEEP_PARALLAX", + + "return currentTextureCoords;", + + "#elif defined( USE_RELIEF_PARALLAX )", + + "vec2 deltaTexCoord = dtex / 2.0;", + "float deltaHeight = layerHeight / 2.0;", + + // Return to the mid point of previous layer + "currentTextureCoords += deltaTexCoord;", + "currentLayerHeight -= deltaHeight;", + + // Binary search to increase precision of Steep Parallax Mapping + "const int numSearches = 5;", + "for ( int i = 0; i < numSearches; i += 1 ) {", + + "deltaTexCoord /= 2.0;", + "deltaHeight /= 2.0;", + "heightFromTexture = texture2D( bumpMap, currentTextureCoords ).r;", + // Shift along or against vector V + "if( heightFromTexture > currentLayerHeight ) {", // Below the surface + + "currentTextureCoords -= deltaTexCoord;", + "currentLayerHeight += deltaHeight;", + + "} else {", // above the surface + + "currentTextureCoords += deltaTexCoord;", + "currentLayerHeight -= deltaHeight;", + + "}", + + "}", + "return currentTextureCoords;", + + "#elif defined( USE_OCLUSION_PARALLAX )", + + "vec2 prevTCoords = currentTextureCoords + dtex;", + + // Heights for linear interpolation + "float nextH = heightFromTexture - currentLayerHeight;", + "float prevH = texture2D( bumpMap, prevTCoords ).r - currentLayerHeight + layerHeight;", + + // Proportions for linear interpolation + "float weight = nextH / ( nextH - prevH );", + + // Interpolation of texture coordinates + "return prevTCoords * weight + currentTextureCoords * ( 1.0 - weight );", + + "#else", // NO_PARALLAX + + "return vUv;", + + "#endif", + + "}", + "#endif", + + "vec2 perturbUv( vec3 surfPosition, vec3 surfNormal, vec3 viewPosition ) {", + + "vec2 texDx = dFdx( vUv );", + "vec2 texDy = dFdy( vUv );", + + "vec3 vSigmaX = dFdx( surfPosition );", + "vec3 vSigmaY = dFdy( surfPosition );", + "vec3 vR1 = cross( vSigmaY, surfNormal );", + "vec3 vR2 = cross( surfNormal, vSigmaX );", + "float fDet = dot( vSigmaX, vR1 );", + + "vec2 vProjVscr = ( 1.0 / fDet ) * vec2( dot( vR1, viewPosition ), dot( vR2, viewPosition ) );", + "vec3 vProjVtex;", + "vProjVtex.xy = texDx * vProjVscr.x + texDy * vProjVscr.y;", + "vProjVtex.z = dot( surfNormal, viewPosition );", + + "return parallaxMap( vProjVtex );", + "}", + + "void main() {", + + "vec2 mapUv = perturbUv( -vViewPosition, normalize( vNormal ), normalize( vViewPosition ) );", + "gl_FragColor = texture2D( map, mapUv );", + + "}", + + ].join( "\n" ) + +}; diff --git a/examples/textures/brick_bump.jpg b/examples/textures/brick_bump.jpg new file mode 100644 index 0000000000000000000000000000000000000000..727b52abf5805b31dcc8f3aa75dec3252f6245de Binary files /dev/null and b/examples/textures/brick_bump.jpg differ diff --git a/examples/textures/brick_diffuse.jpg b/examples/textures/brick_diffuse.jpg new file mode 100644 index 0000000000000000000000000000000000000000..2312abd7d196b9ede4577fcb08269a0385ec7a2f Binary files /dev/null and b/examples/textures/brick_diffuse.jpg differ diff --git a/examples/webgl_materials_parallaxmap.html b/examples/webgl_materials_parallaxmap.html new file mode 100644 index 0000000000000000000000000000000000000000..27baf5233db69aa61960b2a949e4001bfa9cd86f --- /dev/null +++ b/examples/webgl_materials_parallaxmap.html @@ -0,0 +1,180 @@ + + + + three.js webgl - parallax mapping + + + + + + + +
+ Three.js parallax mapping
+ Oryginal shaders authors: + Igor Dyhta, + Morten S. Mikkelsen
+ Texture by AGF81 +
+ + + + + + + + + + + + + +