2a:null 2b:["$","title",null,{"children":"Texture Wrapping | VIDI Intro Graphics | Observable"}] 30:T68c,## Surface Detail # Texture Wrapping What happens when the texture coordinates of your geometry don't exactly stay between 0 and 1? Maybe your UVs stretch beyond their usual boundaries, or you just want your texture to repeatedly tile across the entire surface infinitely. **Texture wrapping** manages this and decides how textures behave when they try to escape their 0-to-1 cage. In this notebook, you can experiment with three common wrapping modes: - **RepeatWrapping**: The texture tiles infinitely, like a never-ending floor pattern. Coordinates outside [0,1] just start over. Great for bricks, tiles, or anything that requires never-ending repetition. - **ClampToEdgeWrapping**: The texture refuses to go beyond its edge. Pixels outside [0,1] simply repeat the color of the nearest edge, extending the edge color outward. Therefore, no accidental repetition. - **MirroredRepeatWrapping**: Like repeat, but every other tile flips horizontally or vertically. Makes repeating patterns feel less mechanical and more organic. You can play around with independent U and V scaling too, stretching or squishing the texture along one axis without touching the other. *Texture wrapping is largely a GPU-level convenience rather than a substitute for careful UV mapping. In professional workflows, artists usually unwrap meshes so that every triangle is properly covered and textures fit exactly as intended. Wrapping modes mostly come into play for tiling patterns, procedural meshes, or quick experimentation. Basically, a safety net for UVs that stray outside the standard [0,1] range. Think of it as a stylistic tool or fallback, not a crutch for sloppy texture mapping.*31:T9d5,viewof uvScaleFactor = { const div = html`

UV Scaling:

Link
(uniform scaling)

Uniform:

U: V:

`; const link = div.querySelector("[name=link]"); const uniformInput = div.querySelector("[name=uniform]"); const inputU = div.querySelector("[name=scaleU]"); const inputV = div.querySelector("[name=scaleV]"); const spanUniform = uniformInput.nextElementSibling; const spanU = inputU.nextElementSibling; const spanV = inputV.nextElementSibling; function updateSliders() { if (link.checked) { uniformInput.disabled = false; inputU.disabled = true; inputV.disabled = true; inputU.value = uniformInput.value; inputV.value = uniformInput.value; } else { uniformInput.disabled = true; inputU.disabled = false; inputV.disabled = false; const avg = (+inputU.value + +inputV.value) / 2; uniformInput.value = avg; } const u = link.checked ? +uniformInput.value : +inputU.value; const v = link.checked ? +uniformInput.value : +inputV.value; spanUniform.textContent = (+uniformInput.value).toFixed(3); spanU.textContent = (+inputU.value).toFixed(3); spanV.textContent = (+inputV.value).toFixed(3); div.value = { u, v }; div.dispatchEvent(new CustomEvent("input")); } uniformInput.addEventListener("input", updateSliders); inputU.addEventListener("input", updateSliders); inputV.addEventListener("input", updateSliders); link.addEventListener("change", updateSliders); updateSliders(); return div; } 32:T481,viewof textureWrappingParams = { const form = html``; const selects = form.querySelectorAll("select"); function updateValue() { const result = { wrapS: form.querySelector('select[name="wrapS"]').value, wrapT: form.querySelector('select[name="wrapT"]').value }; form.value = result; form.dispatchEvent(new CustomEvent("input")); } selects.forEach(sel => sel.addEventListener("change", updateValue)); updateValue(); return form; }33:T538,viewof textureFilteringParams = { const form = html``; form.querySelector('select[name="minFilter"]').value = "LinearMipmapLinear"; form.querySelector('select[name="magFilter"]').value = "Linear"; const selects = form.querySelectorAll("select"); function updateValue() { const result = { minFilter: form.querySelector('select[name="minFilter"]').value, magFilter: form.querySelector('select[name="magFilter"]').value }; form.value = result; form.dispatchEvent(new CustomEvent("input")); } selects.forEach(sel => sel.addEventListener("change", updateValue)); updateValue(); return form; }34:T1001,viewof frag_glsl = mdGLSL_toggle_dark(`#define MAX_LIGHTS 8 precision mediump float; struct AmbientLight { vec3 color; float intensity; }; struct DirectionalLight { vec3 direction; vec3 color; float intensity; }; struct PointLight { vec3 position; vec3 color; float intensity; }; struct Material { vec3 baseColor; float metalness; float roughness; }; uniform AmbientLight u_lights_ambient[MAX_LIGHTS]; uniform DirectionalLight u_lights_dir[MAX_LIGHTS]; uniform PointLight u_lights_point[MAX_LIGHTS]; uniform Material u_material; uniform sampler2D u_baseColorTexture; in vec3 v_viewPos; in vec3 v_viewNormal; in vec3 v_viewTangent; in vec3 v_viewBitangent; varying vec2 v_uv; vec3 getViewDir(vec3 pos_view) { if (isOrthographic) { return normalize(vec3(0.0, 0.0, 1.0)); } return normalize(-pos_view); } vec3 shadeAmbient(vec3 kA) { vec3 result = vec3(0.0); for (int i = 0; i < MAX_LIGHTS; i++) { result += kA * u_lights_ambient[i].color * u_lights_ambient[i].intensity; } return result; } vec3 shadeDiffuseLambertian(vec3 kD, vec3 normal, vec3 viewPos) { vec3 result = vec3(0.0); // Directional light for (int i = 0; i < MAX_LIGHTS; i++) { vec3 L = normalize((mat3(viewMatrix) * -u_lights_dir[i].direction)); float NdotL = max(dot(normalize(normal), L), 0.0); result += kD * u_lights_dir[i].color * u_lights_dir[i].intensity * NdotL; } // Point lights for (int i = 0; i < MAX_LIGHTS; i++) { vec3 lightViewPos = (viewMatrix * vec4(u_lights_point[i].position, 1.0)).xyz; vec3 lightViewDir = lightViewPos - viewPos; vec3 L = normalize(lightViewDir); float distanceSQ = max(dot(lightViewDir, lightViewDir), 0.001); float NdotL = max(dot(normalize(normal), L), 0.0); result += kD * u_lights_point[i].color * u_lights_point[i].intensity * NdotL / distanceSQ; } return result; } vec3 shadeSpecular(vec3 kS, float shininess, vec3 normal, vec3 viewPos) { vec3 result = vec3(0.0); float normalization = (shininess + 8.0) / 25.1327412287; // 8pi vec3 V = getViewDir(viewPos); // Directional lights for (int i = 0; i < MAX_LIGHTS; i++) { vec3 L = normalize((mat3(viewMatrix) * -u_lights_dir[i].direction)); vec3 halfway = normalize(L + V); float ndoth = max(dot(normalize(normal), halfway), 0.0); result += kS * u_lights_dir[i].color * u_lights_dir[i].intensity * normalization * pow(ndoth, shininess); } // Point lights for (int i = 0; i < MAX_LIGHTS; i++) { vec3 lightViewPos = (viewMatrix * vec4(u_lights_point[i].position, 1.0)).xyz; vec3 lightViewDir = lightViewPos - viewPos; vec3 L = normalize(lightViewDir); float distanceSQ = max(dot(lightViewDir, lightViewDir), 0.001); vec3 halfway = normalize(L + V); float ndoth = max(dot(normalize(normal), halfway), 0.0); result += kS * u_lights_point[i].color * u_lights_point[i].intensity * normalization * pow(ndoth, shininess) / distanceSQ; } return result; } vec3 shadeFresnel(vec3 kS, vec3 normal, vec3 viewPos) { vec3 V = getViewDir(viewPos); float fresnel = pow(1.0 - max(dot(normalize(normal), V), 0.0), 2.0); return kS * fresnel * 0.4; } void main() { vec3 viewPos = v_viewPos; // vec3 baseColor = u_material.baseColor; vec3 baseColor = texture(u_baseColorTexture, v_uv).rgb; vec3 mappedNormal = v_viewNormal; float metalness = u_material.metalness; float roughness = u_material.roughness; vec3 kA = baseColor * 0.1; vec3 kD = (1.0 - 0.65 * metalness) * baseColor; vec3 kS = mix(vec3(0.04), baseColor, metalness); float shininess = exp2((1.0 - roughness) * 9.0); vec3 color = vec3(0.0); color += shadeAmbient(kA); color += shadeDiffuseLambertian(kD, mappedNormal, viewPos); color += shadeSpecular(kS, shininess, mappedNormal, viewPos); color += shadeFresnel(kS, mappedNormal, viewPos); gl_FragColor = vec4(color, 1.0); } `, "Fragment shader")35:[{"id":"3857b72fd28b968249aac6387f9ae325029bc130b45f7af8b7ee450ba2963d602c49e55d93422851db1e97002a4f6643f73c5d384d493b8b5e15ec3ebf05c739","href":"https://static.observableusercontent.com/files/3857b72fd28b968249aac6387f9ae325029bc130b45f7af8b7ee450ba2963d602c49e55d93422851db1e97002a4f6643f73c5d384d493b8b5e15ec3ebf05c739","name":"sample_texture.png","type":"image/png","lastModified":1760216655235.603,"size":27367},{"id":"19c1d988892b4e90432f4d5f69908ed45e6fd5c97a3be091692cf297501df4bde06f5cfec99cd0591689e64c2baf5fd4343caebe74a691a821f8f649146c7819","href":"https://static.observableusercontent.com/files/19c1d988892b4e90432f4d5f69908ed45e6fd5c97a3be091692cf297501df4bde06f5cfec99cd0591689e64c2baf5fd4343caebe74a691a821f8f649146c7819","name":"webGL_Logo.png","type":"image/png","lastModified":1760221236084.426,"size":68468},{"id":"94314764c1ee5d3d292e7c4c7120c34d54da7ca5f369299408880979c3d61805b9ad9e519d5a76d8926b011e33056e540d334699b526d2c58b6853f4832acb91","href":"https://static.observableusercontent.com/files/94314764c1ee5d3d292e7c4c7120c34d54da7ca5f369299408880979c3d61805b9ad9e519d5a76d8926b011e33056e540d334699b526d2c58b6853f4832acb91","name":"checkerboard@1.png","type":"image/webp","lastModified":1770770834937.786,"size":3346}] 2e:{"id":"21dc447a8b652cb1","slug":"texture-wrapping","title":"Texture Wrapping","thumbnail":"5f265f17d953dbe772f810315f8fe076dd22e7b1fb90fe250d8be891b160c9cd","access_level":"public","create_time":"$D2025-10-11T19:57:57.597Z","update_time":"$D2026-02-11T00:48:01.942Z","view_time":null,"first_public_time":"$D2025-10-11T22:32:36.937Z","fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"6a2979fe0c58caa8","login":"vidi-intro-graphics","name":"VIDI Intro Graphics","avatar_url":"https://avatars-next.observableusercontent.com/45b660a2d93636af360abe7822040f466ffa17dd2a472fd91fa891a7b544a83c","tier":"starter_2024"},"version":372,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c3cd8e5f7dd364e3","login":"eroisk","name":"Set Paing","avatar_url":"https://avatars-next.observableusercontent.com/24cc62fc242e5de882ce3ce002c7a093b22513123bd01ac4ec35a17f48595a12","tier":null}],"members":[{"type":"individual","id":"c3cd8e5f7dd364e3","login":"eroisk","name":"Set Paing","avatar_url":"https://avatars-next.observableusercontent.com/24cc62fc242e5de882ce3ce002c7a093b22513123bd01ac4ec35a17f48595a12","tier":null,"role":"editor"},{"type":"team","id":"6a2979fe0c58caa8","login":"vidi-intro-graphics","name":"VIDI Intro Graphics","avatar_url":"https://avatars-next.observableusercontent.com/45b660a2d93636af360abe7822040f466ffa17dd2a472fd91fa891a7b544a83c","tier":"starter_2024","role":"editor"}],"comments":[{"id":"3cf17226f54b37b6","reply_to_id":null,"content":"A small note: I'd suggest to keep dampening off for more precise control, and to instead lower rotateSpeed to .e.g 0.5.","create_time":"$D2025-10-28T13:34:20.283Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"9e180f6758d4b892","slug":"core-concepts-in-computer-graphics","title":"Core Concepts in Computer Graphics","owner":{"id":"6a2979fe0c58caa8","login":"vidi-intro-graphics","name":"VIDI Intro Graphics"}},"type":"notebook","body":{"title":"Texture Wrapping","cells":[{"id":5,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":331,"value":"___\n## Quick Manual\n\n- Use the sliders in the **UV Scaling** section to stretch or shrink the texture along the X and Y axes, either together (uniform) or independently.\n- Experiment with **Wrap S** and **Wrap T** to see how textures behave when UVs go beyond the usual [0,1] range.\n- Play with the **Minification** and **Magnification** filters to see how texture detail changes when it's zoomed in or out.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":31,"value":"canvas = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":243,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":227,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":239,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":310,"value":"viewof textureSelectParams = {\n const form = html``;\n\n form.type.value = \"TestGrid\";\n form.value = form.type.value;\n\n form.addEventListener(\"change\", () => {\n form.value = form.type.value;\n form.dispatchEvent(new CustomEvent(\"input\"));\n });\n\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":201,"value":"___\n## Textures","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":203,"value":"getTexture = (url) => {\n const filterMap = {\n Linear: THREE.LinearFilter,\n Nearest: THREE.NearestFilter,\n LinearMipmapLinear: THREE.LinearMipmapLinearFilter,\n LinearMipmapNearest: THREE.LinearMipmapNearestFilter\n };\n\n const wrappingMap = {\n Repeat: THREE.RepeatWrapping,\n ClampToEdge: THREE.ClampToEdgeWrapping,\n MirroredRepeat: THREE.MirroredRepeatWrapping\n }\n\n const tex = new THREE.TextureLoader().load(url);\n\n tex.minFilter = filterMap[textureFilteringParams.minFilter];\n tex.magFilter = filterMap[textureFilteringParams.magFilter];\n tex.wrapS = wrappingMap[textureWrappingParams.wrapS];\n tex.wrapT = wrappingMap[textureWrappingParams.wrapT];\n\n return tex;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":207,"value":"textureUniforms = {\n let texture;\n \n if (textureSelectParams == \"TestGrid\") {\n texture = {\n baseColorTexture: await getTexture(await FileAttachment(\"sample_texture.png\").url()),\n };\n }\n if (textureSelectParams == \"Checkerboard\") {\n texture = {\n baseColorTexture: await getTexture(await FileAttachment(\"checkerboard@1.png\").url()),\n };\n }\n if (textureSelectParams == \"WebGLLogo\") {\n texture = {\n baseColorTexture: await getTexture(await FileAttachment(\"webGL_Logo.png\").url()),\n };\n }\n return texture;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":253,"value":"function scaleUVs(uvArray, scaleU, scaleV) {\n const center = 0.5;\n return uvArray.map((v, i) => (i % 2 === 0)\n ? (v - center) * scaleU + center // U // X\n : (v - center) * scaleV + center // V // Y\n );\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":65,"value":"___\n## GLSL Shaders","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":61,"value":"viewof vert_glsl = mdGLSL_toggle_dark(`out vec3 v_viewPos;\nout vec3 v_viewNormal;\nout vec3 v_viewTangent;\nout vec3 v_viewBitangent;\n\nvarying vec2 v_uv;\n\nvoid main() {\n v_viewPos = (modelViewMatrix * vec4(position, 1.0)).xyz;\n v_viewNormal = normalize(normalMatrix * normal);\n v_viewTangent = normalize(normalMatrix * tangent.xyz);\n v_viewBitangent = cross(v_viewNormal, v_viewTangent) * tangent.w;\n\n v_uv = uv;\n\n gl_Position = projectionMatrix * vec4(v_viewPos, 1.0);\n}\n`, \"Vertex shader\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":67,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":112,"value":"___\n## Cube Mesh","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":124,"value":"posArray = [\n -1, 1, -1,\n -1, 1, 1,\n 1, 1, 1,\n 1, 1, -1,\n\n -1, 1, -1,\n -1, 1, 1,\n -1, -1, 1,\n -1, -1, -1,\n \n -1, 1, 1,\n 1, 1, 1,\n 1, -1, 1,\n -1, -1, 1,\n\n 1, 1, 1,\n 1, 1, -1,\n 1, -1, -1,\n 1, -1, 1,\n \n 1, 1, -1,\n -1, 1, -1,\n -1, -1, -1,\n 1, -1, -1,\n\n -1, -1, 1,\n 1, -1, 1,\n 1, -1, -1,\n -1, -1, -1,\n];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":135,"value":"normArray = [\n 0, 1, 0,\n 0, 1, 0,\n 0, 1, 0,\n 0, 1, 0,\n\n -1, 0, 0,\n -1, 0, 0,\n -1, 0, 0,\n -1, 0, 0,\n \n 0, 0, 1,\n 0, 0, 1,\n 0, 0, 1,\n 0, 0, 1,\n\n 1, 0, 0,\n 1, 0, 0,\n 1, 0, 0,\n 1, 0, 0,\n \n 0, 0, -1,\n 0, 0, -1,\n 0, 0, -1,\n 0, 0, -1,\n\n 0, -1, 0,\n 0, -1, 0,\n 0, -1, 0,\n 0, -1, 0,\n];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":150,"value":"uvArray = scaleUVs([\n 0, 1,\n 0, 0,\n 1, 0,\n 1, 1,\n\n 0, 1,\n 1, 1,\n 1, 0,\n 0, 0,\n\n 0, 1,\n 1, 1,\n 1, 0,\n 0, 0,\n\n 0, 1,\n 1, 1,\n 1, 0,\n 0, 0,\n\n 0, 1,\n 1, 1,\n 1, 0,\n 0, 0,\n\n 0, 1,\n 1, 1,\n 1, 0,\n 0, 0,\n], uvScaleFactor.u, uvScaleFactor.v);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":139,"value":"idxArray = [\n 0, 1, 2, 0, 2, 3, // top\n 4, 5, 6, 4, 6, 7, // left\n 8, 9, 10, 8, 10, 11, // front\n 12, 13, 14, 12, 14, 15, // right\n 16, 17, 18, 16, 18, 19, // back\n 20, 21, 22, 20, 22, 23, // bottom\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":114,"value":"cubeGeometry = {\n const geometry = new THREE.BufferGeometry();\n const positions = new Float32Array(posArray);\n const normals = new Float32Array(normArray);\n const uvs = new Float32Array(uvArray);\n \n geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));\n geometry.setAttribute('normal', new THREE.BufferAttribute(normals, 3));\n geometry.setAttribute('uv', new THREE.BufferAttribute(uvs, 2));\n geometry.setIndex(idxArray);\n return geometry;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":94,"value":"___\n## Light Sources","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":96,"value":"// match this with GLSL shaders\nMAX_LIGHTS = 8;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":99,"value":"ambientLights = [\n {\n color: new THREE.Vector3(1.0, 1.0, 1.0),\n intensity: 0.05,\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":102,"value":"directionalLights = [\n {\n direction: new THREE.Vector3(-3, -2, -3).normalize(),\n color: new THREE.Vector3(1.0, 1.0, 1.0),\n intensity: 0.6,\n castShadow: false,\n },\n {\n direction: new THREE.Vector3(3, -2, -3).normalize(),\n color: new THREE.Vector3(1.0, 1.0, 1.0),\n intensity: 0.6,\n castShadow: false,\n },\n {\n direction: new THREE.Vector3(3, -2, 3).normalize(),\n color: new THREE.Vector3(1.0, 1.0, 1.0),\n intensity: 0.6,\n castShadow: false,\n },\n {\n direction: new THREE.Vector3(-3, -2, 3).normalize(),\n color: new THREE.Vector3(1.0, 1.0, 1.0),\n intensity: 0.6,\n castShadow: false,\n },\n {\n direction: new THREE.Vector3(0, 1, 0).normalize(),\n color: new THREE.Vector3(1.0, 1.0, 1.0),\n intensity: 0.4,\n castShadow: false,\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":106,"value":"pointLights = [\n {\n position: new THREE.Vector3(-8, 0, 0),\n color: new THREE.Vector3(1.0, 0.8, 0.6),\n intensity: 16.0,\n castShadow: false,\n },\n {\n position: new THREE.Vector3(8, 0, 0),\n color: new THREE.Vector3(0.6, 0.8, 1.0),\n intensity: 16.0,\n castShadow: false,\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":87,"value":"uniformLightData = {\n const paddedAmbient = ambientLights.slice(0, MAX_LIGHTS);\n while (paddedAmbient.length < MAX_LIGHTS) {\n paddedAmbient.push({\n color: new THREE.Vector3(0.0, 0.0, 0.0),\n intensity: 0.0,\n });\n }\n\n const paddedDir = directionalLights.slice(0, MAX_LIGHTS);\n while (paddedDir.length < MAX_LIGHTS) {\n paddedDir.push({\n direction: new THREE.Vector3(0, 0, -1),\n color: new THREE.Vector3(0, 0, 0),\n intensity: 0.0,\n castShadow: false,\n });\n }\n\n const paddedPoint = pointLights.slice(0, MAX_LIGHTS);\n while (paddedPoint.length < MAX_LIGHTS) {\n paddedPoint.push({\n position: new THREE.Vector3(0, 0, 0),\n color: new THREE.Vector3(0, 0, 0),\n intensity: 0.0,\n castShadow: false,\n });\n }\n\n return { ambient: paddedAmbient, directional: paddedDir, point: paddedPoint };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":73,"value":"___\n## Uniform Object and Shader Materials","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":85,"value":"materialUniform = {\n return {\n baseColor: new THREE.Color(1.0, 1.0, 1.0),\n metalness: 0.2,\n roughness: 0.3,\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":81,"value":"uniformsObj = {\n return {\n u_lights_ambient: {value: uniformLightData.ambient},\n u_lights_dir: {value: uniformLightData.directional},\n u_lights_point: {value: uniformLightData.point},\n\n u_material: {\n value: {\n baseColor: materialUniform.baseColor,\n metalness: materialUniform.metalness,\n roughness: materialUniform.roughness,\n }\n },\n \n u_baseColorTexture: { value: textureUniforms.baseColorTexture },\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":78,"value":"makeShaderMaterial = (vertS, fragS) => {\n return new THREE.ShaderMaterial({\n vertexShader: vertS,\n fragmentShader: fragS,\n uniforms: uniformsObj,\n side: THREE.DoubleSide,\n defines: { USE_TANGENT: '' }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":71,"value":"phongMaterial = makeShaderMaterial(vert_glsl, frag_glsl)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"___\n## THREE.js Setup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":59,"value":"meshObj = {\n const geometry = cubeGeometry;\n geometry.computeTangents();\n if (!geometry) return null;\n const obj = new THREE.Mesh(geometry, phongMaterial);\n\n return obj;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":56,"value":"scene = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x000000);\n\n scene.add(meshObj);\n\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":39,"value":"mutable oldCamera = null;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"mutable target = new THREE.Vector3(0, 0, 0);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"camera = {\n const oldCam = mutable oldCamera;\n const oldPos = oldCam ? oldCam.position.clone() : new THREE.Vector3(2.6, 2.2, 2.6);\n const oldTarget = target;\n\n const fov = 50;\n const aspect = width / height;\n const near = 0.01;\n const far = 1000;\n let cam = new THREE.PerspectiveCamera(fov, aspect, near, far);\n\n cam.position.copy(oldPos);\n cam.lookAt(oldTarget);\n mutable oldCamera = cam;\n\n return cam;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"renderer = {\n const canvas = document.getElementById(\"three-canvas\");\n const renderer = new THREE.WebGLRenderer({ canvas, context: canvas.getContext(\"webgl2\") });\n renderer.setSize(width, height);\n renderer.setPixelRatio(devicePixelRatio);\n return renderer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"controls = {\n const controls = new THREE.OrbitControls(camera, renderer.domElement);\n controls.target.copy(mutable target);\n controls.enableDamping = true;\n controls.dampingFactor = 0.15;\n controls.rotateSpeed = 0.4;\n controls.addEventListener(\"change\", () => {\n mutable target.copy(controls.target); // sync to global target\n mainRender();\n });\n invalidation.then(() => {\n controls.dispose();\n renderer.dispose();\n });\n return controls;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":53,"value":"mainRender = () => {\n renderer.render(scene, camera);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"___\n## Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":118,"value":"// Continuously updates\n{\n while (true) {\n controls.update();\n mainRender();\n yield null;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"width = 800;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"height = 600;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":91,"value":"mixColor = (a, b, t) => {\n return new THREE.Color(\n a.r * (1 - t) + b.r * t,\n a.g * (1 - t) + b.g * t,\n a.b * (1 - t) + b.b * t\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.130.0/build/three.min.js\");\n await require(\"three@0.130.0/examples/js/controls/OrbitControls.js\").catch(() => {});\n // await require(\"three@0.130.0/examples/js/loaders/OBJLoader.js\").catch(() => {});\n // await require(\"three@0.130.0/examples/js/utils/BufferGeometryUtils.js\").catch(() => {});\n // await require(\"three@0.130.0/examples/js/geometries/TeapotGeometry.js\").catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":0,"value":"import { mdGLSL_toggle_dark, style } from \"@vidi-intro-graphics/resources\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"style;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 2f:"$2e:body"