How to use the sRGBEncoding function from three
Find comprehensive JavaScript three.sRGBEncoding code examples handpicked from public code repositorys.
sRGBEncoding is a constant representing sRGB encoding, which is a standard for displaying colors in digital images and video.
GitHub: tmmgroupag/threebox
![tmmgroupag profile picture](/tmmgroupag.png?size=40)
57 58 59 60 61 62 63 64 65 66
context: glContext }); this.renderer.setPixelRatio(window.devicePixelRatio); this.renderer.setSize(this.map.getCanvas().clientWidth, this.map.getCanvas().clientHeight); this.renderer.outputEncoding = THREE.sRGBEncoding; this.renderer.autoClear = false; // [jscastro] set labelRendered this.labelRenderer = new LabelRenderer(this.map);
+ 5 other calls in file
176 177 178 179 180 181 182 183 184 185
image_base_path + "posz.jpg", image_base_path + "negz.jpg" ]; textureCube = new THREE.CubeTextureLoader().load( urls ); textureCube.format = THREE.RGBFormat; textureCube.mapping = THREE.CubeReflectionMapping; textureCube.encoding = THREE.sRGBEncoding; var cubeShader = THREE.ShaderLib[ "cube" ]; var cubeMaterial = new THREE.ShaderMaterial( { fragmentShader: cubeShader.fragmentShader,
How does three.sRGBEncoding work?
In Three.js, sRGBEncoding is a color encoding that linearizes the sRGB color space in order to accurately represent colors in a computer program, and it is used as an option for textures, render targets, and other objects that can be encoded in a color space. By default, textures and render targets are assumed to be encoded in the sRGB color space, which is non-linear and is not suitable for image processing. To linearize the colors, sRGBEncoding is used. It converts the RGB values from the sRGB color space to the linear RGB color space, where the RGB values are proportional to the intensity of light emitted by a display, and then performs the necessary computations to encode or decode the colors in the linear space. This process improves the accuracy and consistency of colors in the rendered output, especially in high dynamic range scenes. When sRGBEncoding is enabled, Three.js will automatically convert the textures and render targets to the linear RGB color space when they are loaded, and then convert them back to sRGB when they are displayed. This allows the program to work with images and colors in a more natural and intuitive way, and to achieve better color fidelity in the rendered output.
2153 2154 2155 2156 2157 2158 2159 2160 2161 2162
} if (materialDef.name !== undefined) material.name = materialDef.name; // baseColorTexture, emissiveTexture, and specularGlossinessTexture use sRGB encoding. if (material.map) material.map.encoding = THREE.sRGBEncoding; if (material.emissiveMap) material.emissiveMap.encoding = THREE.sRGBEncoding; if (material.specularMap) material.specularMap.encoding = THREE.sRGBEncoding;
+ 44 other calls in file
Ai Example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81
// Create a renderer with sRGB encoding const renderer = new THREE.WebGLRenderer({ gammaFactor: 2.2, gammaOutput: true, }); // Create a texture with sRGB encoding const texture = new THREE.TextureLoader().load("texture.jpg"); texture.encoding = THREE.sRGBEncoding; // Create a material with sRGB encoding const material = new THREE.MeshBasicMaterial({ map: texture, color: 0xffffff, side: THREE.DoubleSide, toneMapped: false, emissive: 0x000000, emissiveIntensity: 1, flatShading: false, wireframe: false, vertexColors: false, skinning: false, morphTargets: false, morphNormals: false, fog: true, envMap: null, reflectivity: 1, refractionRatio: 0.98, depthFunc: THREE.LessEqualDepth, depthWrite: true, stencilWrite: false, stencilFunc: THREE.AlwaysStencilFunc, stencilRef: 0, stencilMask: 0xff, stencilFail: THREE.KeepStencilOp, stencilZFail: THREE.KeepStencilOp, stencilZPass: THREE.KeepStencilOp, alphaTest: 0, transparent: false, blendSrc: THREE.OneFactor, blendDst: THREE.ZeroFactor, blendEquation: THREE.AddEquation, blendSrcAlpha: null, blendDstAlpha: null, blendEquationAlpha: null, premultipliedAlpha: false, dithering: false, shadowSide: null, colorWrite: true, precision: null, polygonOffset: false, polygonOffsetFactor: 0, polygonOffsetUnits: 0, alphaToCoverage: false, toneMapping: THREE.LinearToneMapping, toneMappingExposure: 1, toneMappingWhitePoint: 1, depthTest: true, clippingPlanes: null, clipShadows: false, shadowMap: null, shadowMapEnabled: false, shadowMapType: THREE.PCFShadowMap, shadowMapBias: 0, shadowMapDarkness: 0.5, shadowMapWidth: 512, shadowMapHeight: 512, shadowCameraNear: 50, shadowCameraFar: 5000, shadowCameraFov: 50, shadowCameraLeft: -500, shadowCameraRight: 500, shadowCameraTop: 500, shadowCameraBottom: -500, }); // Create a mesh with sRGB encoded material const geometry = new THREE.BoxGeometry(1, 1, 1); const mesh = new THREE.Mesh(geometry, material); mesh.position.set(0, 0, -2); scene.add(mesh);
In this example, we create a WebGLRenderer instance with gammaFactor: 2.2 and gammaOutput: true to enable sRGB encoding. We also load a texture with THREE.TextureLoader and set its encoding to THREE.sRGBEncoding. Finally, we create a MeshBasicMaterial with various options, including map: texture and color: 0xffffff, and assign it to a BoxGeometry to create a mesh that uses sRGB encoded materials.
779 780 781 782 783 784 785 786 787 788
} const colorArray = extension.specularColorFactor || [1, 1, 1]; materialParams.specularColor = new three.Color(colorArray[0], colorArray[1], colorArray[2]); if (extension.specularColorTexture !== undefined) { pending.push(parser.assignTexture(materialParams, 'specularColorMap', extension.specularColorTexture).then(function (texture) { texture.encoding = three.sRGBEncoding; })); } return Promise.all(pending); }
+ 2 other calls in file
97 98 99 100 101 102 103 104 105 106
signals.rendererUpdated.dispatch(); } // function createRenderer() { currentRenderer = new THREE.WebGLRenderer({ antialias: antialiasBoolean.getValue() }); currentRenderer.outputEncoding = THREE.sRGBEncoding; currentRenderer.physicallyCorrectLights = physicallyCorrectLightsBoolean.getValue(); currentRenderer.shadowMap.enabled = shadowsBoolean.getValue(); currentRenderer.shadowMap.type = parseFloat(shadowTypeSelect.getValue()); currentRenderer.toneMapping = parseFloat(toneMappingSelect.getValue());
GitHub: 4MOR3/three-background
54 55 56 57 58 59 60 61 62 63
dom.appendChild(canvas); dom.style.overflow = 'hidden'; var renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true, alpha: true, powerPreference: 'high-performance' }); //创建渲染器 renderer.shadowMap.enabled = true; //阴影设置 renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.outputEncoding = THREE.sRGBEncoding; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 0.77; //光效设置 var ambient = new THREE.AmbientLight(0xffffff, 0.7); //环境光
+ 12 other calls in file
GitHub: VeinKowal/veins
2238 2239 2240 2241 2242 2243 2244 2245 2246 2247
material = new materialType(materialParams); } if (materialDef.name) material.name = materialDef.name; // baseColorTexture, emissiveTexture, and specularGlossinessTexture use sRGB encoding. if (material.map) material.map.encoding = _three.sRGBEncoding; if (material.emissiveMap) material.emissiveMap.encoding = _three.sRGBEncoding; assignExtrasToUserData(material, materialDef); parser.associations.set(material, { type: 'materials',
+ 3 other calls in file
386 387 388 389 390 391 392 393 394 395
if (texture != '') { texture = new THREE.TextureLoader().load('assets/resources/texture/terrain/geoImg.PNG'); texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(1, 1); texture.anisotropy = 16; texture.encoding = THREE.sRGBEncoding; } else { texture = new THREE.CanvasTexture(this.generateTexture(altitudes, segWidth - 1, segHeight - 1)); texture.wrapS = THREE.ClampToEdgeWrapping;
+ 9 other calls in file
GitHub: b-dhillon/Carbon
652 653 654 655 656 657 658 659 660 661
texture = _ref.texture, props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$2); var t = fiber.useLoader(three.TextureLoader, textureSrc); React.useLayoutEffect(function () { t.encoding = three.sRGBEncoding; t.wrapS = t.wrapT = three.RepeatWrapping; }, [t]); var effect = React.useMemo(function () { return new postprocessing.TextureEffect(_extends__default["default"]({}, props, {
2102 2103 2104 2105 2106 2107 2108 2109 2110
material.normalScale.y = - material.normalScale.y; } // emissiveTexture and baseColorTexture use sRGB encoding. if ( material.map ) material.map.encoding = THREE.sRGBEncoding; if ( material.emissiveMap ) material.emissiveMap.encoding = THREE.sRGBEncoding; if ( materialDef.extras ) material.userData = materialDef.extras;
+ 17 other calls in file
GitHub: MichaelPolla/mip-viewer
393 394 395 396 397 398 399 400 401 402
} } updateTextureEncoding() { const encoding = this.state.textureEncoding === 'sRGB' ? THREE.sRGBEncoding : THREE.LinearEncoding; this.content.traverse((node) => { if (node.isMesh) { const material = node.material;
+ 5 other calls in file
three.Vector3 is the most popular function in three (22341 examples)