Home

Index

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.

Threebox.js

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);

278

+ 5 other calls in file

scene-editor.js

GitHub: AlexApps99/cs-field-guide

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.

Loader.js

GitHub: peter-hutsul/h5tiny

-2

GLTFLoader.js

GitHub: XvisionAS/FieldTwin-Integration-Demo

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.

index.cjs

GitHub: Brakebein/node-three-gltf

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

Sidebar.Project.Renderer.js

GitHub: BaurTokenov/three-js-editor-2

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());

Factory.js

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

GLTFLoader.js

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

GISControlClass.js

GitHub: yuuki9/angular-typescript-study

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

index.cjs

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, {

e7be5359-ca18-4cca-ae35-134d9904e925____GLTFLoader.js

GitHub: TAULO/CodeGenerator

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

viewer.js

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

Other functions in three

Sorted by popularity

three.Vector3 is the most popular function in three (22341 examples)

Other popular packages:

Home

About