2d:null 2e:["$","title",null,{"children":"Gradient background follows camera, flat - Three.js | Esteban Serrano | Observable"}] 33:T4ca,function updateArrow() { var cameraVector = new THREE.Vector3(); camera.getWorldDirection(cameraVector); cameraArrow.position.set( camera.position.x, camera.position.y, camera.position.z ); cameraArrow.setDirection(cameraVector); //position backgroundPlane.position.copy(camera.position); backgroundPlane.position.add(cameraVector.multiplyScalar(7)); const towardsCamera = new THREE.Vector3(); towardsCamera .subVectors(camera.position, backgroundPlane.position) .normalize(); targetArrow.setDirection(towardsCamera); targetArrow.position.copy(backgroundPlane.position); //console.log(towardsCamera); const finalVec = new THREE.Vector3( towardsCamera.x, 0, towardsCamera.z ).normalize(); //backgroundPlane.rotation.setFromVector3(finalVec); //backgroundPlane.lookAt(towardsCamera.x, 0, towardsCamera.z); const axis = new THREE.Vector3(0, 0, 1).normalize(); finalArrow.setDirection(finalVec); finalArrow.position.copy(backgroundPlane.position); backgroundPlane.quaternion.setFromUnitVectors(axis, finalVec.clone()); //console.log(finalVec); //backgroundPlane.rotation.setFromVector3(finalVec, "xyz"); //backgroundPlane.lookAt(finalVec); }34:T454,ramp = (interpolator) => { const { context, width, height } = createContext(600, 800); // Faster but doesn't allow per-pixel jittering // const imgCanvas = document.createElement('canvas'); // imgCanvas.width = samples.length; // imgCanvas.height = 4; // const imgCtx = imgCanvas.getContext('2d'); // for (let x = 0; x < samples.length; x++) { // let Lab = samples[x]; // let [ R, G, B ] = LabConvert.lab2rgb(Lab); // imgCtx.fillStyle = `rgb(${R}, ${G}, ${B})`; // imgCtx.fillRect(x, 0, 1, imgCanvas.height); // } // context.drawImage(imgCanvas, 0, 0, width, height); const img = context.createImageData( context.canvas.width, context.canvas.height ); for (let x = 0; x < img.width; x++) { for (let y = 0; y < img.height; y++) { const u = y / (img.height - 1); const [R, G, B] = interpolator(u, y, img.width); const i = x + y * img.width; img.data[i * 4 + 0] = R; img.data[i * 4 + 1] = G; img.data[i * 4 + 2] = B; img.data[i * 4 + 3] = 255; } } context.putImageData(img, 0, 0); return context.canvas; }35:Tfc4,getCatmullRomPoint = { // Extracted from ThreeJS, modified to plain arrays /* Based on an optimized c++ solution in - http://stackoverflow.com/questions/9489736/catmull-rom-curve-with-no-cusps-and-no-self-intersections/ - http://ideone.com/NoEbVM This CubicPoly class could be used for reusing some variables and calculations, but for three.js curve use, it could be possible inlined and flatten into a single function call which can be placed in CurveUtils. */ function CubicPoly() { let c0 = 0, c1 = 0, c2 = 0, c3 = 0; /* * Compute coefficients for a cubic polynomial * p(s) = c0 + c1*s + c2*s^2 + c3*s^3 * such that * p(0) = x0, p(1) = x1 * and * p'(0) = t0, p'(1) = t1. */ function init(x0, x1, t0, t1) { c0 = x0; c1 = t0; c2 = -3 * x0 + 3 * x1 - 2 * t0 - t1; c3 = 2 * x0 - 2 * x1 + t0 + t1; } return { initCatmullRom: function (x0, x1, x2, x3, tension) { init(x1, x2, tension * (x2 - x0), tension * (x3 - x1)); }, initNonuniformCatmullRom: function (x0, x1, x2, x3, dt0, dt1, dt2) { // compute tangents when parameterized in [t1,t2] let t1 = (x1 - x0) / dt0 - (x2 - x0) / (dt0 + dt1) + (x2 - x1) / dt1; let t2 = (x2 - x1) / dt1 - (x3 - x1) / (dt1 + dt2) + (x3 - x2) / dt2; // rescale tangents for parametrization in [0,1] t1 *= dt1; t2 *= dt1; init(x1, x2, t1, t2); }, calc: function (t) { let t2 = t * t; let t3 = t2 * t; return c0 + c1 * t + c2 * t2 + c3 * t3; }, }; } const tmp1 = []; const tmp2 = []; const px = new CubicPoly(); const py = new CubicPoly(); const pz = new CubicPoly(); return function getCatmullRomPoint (opts, t, out) { opts = opts || {}; out = out || []; if (Array.isArray(opts)) { opts = { points: opts }; } const { closed = false, type = 'uniform', tension = 0.5 } = opts; const points = opts.points || []; const l = points.length; const p = (l - (closed ? 0 : 1)) * t; let intPoint = Math.floor(p); let weight = p - intPoint; if (closed) { intPoint += intPoint > 0 ? 0 : (Math.floor(Math.abs(intPoint) / l) + 1) * l; } else if (weight === 0 && intPoint === l - 1) { intPoint = l - 2; weight = 1; } let p0, p1, p2, p3; // 4 points if (closed || intPoint > 0) { p0 = points[(intPoint - 1) % l]; } else { // extrapolate first point vec3.sub(tmp1, points[0], points[1]); vec3.add(tmp1, tmp1, points[0]); p0 = tmp1; } p1 = points[intPoint % l]; p2 = points[(intPoint + 1) % l]; if (closed || intPoint + 2 < l) { p3 = points[(intPoint + 2) % l]; } else { // extrapolate last point vec3.sub(tmp2, points[l - 1], points[l - 2]) vec3.add(tmp2, tmp2, points[l - 1]); p3 = tmp2; } if (type === "centripetal" || type === "chordal") { // init Centripetal / Chordal Catmull-Rom let pow = type === "chordal" ? 0.5 : 0.25; let dt0 = Math.pow(vec3.distSq(p0, p1), pow); let dt1 = Math.pow(vec3.distSq(p1, p2), pow); let dt2 = Math.pow(vec3.distSq(p2, p3), pow); // safety check for repeated points if (dt1 < 1e-4) dt1 = 1.0; if (dt0 < 1e-4) dt0 = dt1; if (dt2 < 1e-4) dt2 = dt1; px.initNonuniformCatmullRom(p0[0], p1[0], p2[0], p3[0], dt0, dt1, dt2); py.initNonuniformCatmullRom(p0[1], p1[1], p2[1], p3[1], dt0, dt1, dt2); pz.initNonuniformCatmullRom(p0[2], p1[2], p2[2], p3[2], dt0, dt1, dt2); } else if (type === "catmullrom" || type === "uniform") { px.initCatmullRom(p0[0], p1[0], p2[0], p3[0], tension); py.initCatmullRom(p0[1], p1[1], p2[1], p3[1], tension); pz.initCatmullRom(p0[2], p1[2], p2[2], p3[2], tension); } out[0] = px.calc(weight); out[1] = py.calc(weight); out[2] = pz.calc(weight); return out; } }36:Tbcc,CatmullRomSpline = { function CatmullRomSpline (points = [], opts = {}) { const { closed = false, type = 'uniform', tension = 0.5, arcLengthDivisions = 200 } = opts; const spline = { closed, type, tension, points, arcLengthDivisions, getArcLengths, getPoints, getPoint, getSpacedPoint, getUtoTMapping }; return spline; function getPoints (n, spaced) { const arclengths = getArcLengths(); const paths = []; for (let i = 0; i < n; i++) { const t = spline.closed ? (i / n) : (i / (n - 1)); const p = spaced ? getSpacedPoint(t, null, arclengths) : getPoint(t); paths.push(p); } return paths; } function getPoint (t, out) { return getCatmullRomPoint(spline, t, out); } function getSpacedPoint (u, out, arcLengths) { let t = getUtoTMapping(u, null, arcLengths); return getPoint(t, out); } function getUtoTMapping (u, distance, arcLengths) { arcLengths = arcLengths || getArcLengths(); var i = 0, il = arcLengths.length; var targetArcLength; // The targeted u distance value to get if (distance != null) { targetArcLength = distance; } else { targetArcLength = u * arcLengths[il - 1]; } // binary search for the index with largest value smaller than target u distance var low = 0, high = il - 1, comparison; while (low <= high) { i = Math.floor(low + (high - low) / 2); // less likely to overflow, though probably not issue here, JS doesn't really have integers, all numbers are floats comparison = arcLengths[i] - targetArcLength; if (comparison < 0) { low = i + 1; } else if (comparison > 0) { high = i - 1; } else { high = i; break; // DONE } } i = high; if (arcLengths[i] === targetArcLength) { return i / (il - 1); } // we could get finer grain at lengths, or use simple interpolation between two points var lengthBefore = arcLengths[i]; var lengthAfter = arcLengths[i + 1]; var segmentLength = lengthAfter - lengthBefore; // determine where we are between the 'before' and 'after' points var segmentFraction = (targetArcLength - lengthBefore) / segmentLength; // add that fractional amount to t var t = (i + segmentFraction) / (il - 1); return t; } function getArcLengths (divisions) { divisions = divisions || spline.arcLengthDivisions; var out = []; var current; var last = getPoint(0); var p; var sum = 0; out.push(0); for (p = 1; p <= divisions; p++) { current = getPoint(p / divisions); sum += vec3.dist(current, last); out.push(sum); last = current; } return out; } } return CatmullRomSpline; }37:[] 31:{"id":"9b30b094e44b8e0f","slug":"gradient-background-follows-camera-flat-three-js","title":"Gradient background follows camera, flat - Three.js","thumbnail":"47af28fc0bf2dfa59531d6edcba8ab0bdede8e356284f0bb4bc3eee9b912cfcc","access_level":"public","create_time":"$D2022-01-15T15:21:39.479Z","update_time":"$D2022-01-17T18:29:35.210Z","view_time":null,"first_public_time":"$D2022-05-11T16:51:53.866Z","has_unpublished_edits":null,"fork":{"id":"4d9b7665f00a916c","slug":"three-js","title":"Three.js","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":1,"starred":false,"owner":{"type":"team","id":"a311b2c901bccd79","login":"esrs","name":"Esteban Serrano","avatar_url":"https://avatars-next.observableusercontent.com/ea4f125e103de7533553e6e6af913b86933bcf367d98be7a518da02ddeef349f","tier":"starter_2024"},"version":624,"publish_version":624,"role":null,"authored":false,"authors":[{"type":"individual","id":"5650f9dd9ce944dc","login":"esrs","name":"Esteban Serrano","avatar_url":"https://avatars-next.observableusercontent.com/ea4f125e103de7533553e6e6af913b86933bcf367d98be7a518da02ddeef349f","tier":null}],"members":[{"type":"individual","id":"5650f9dd9ce944dc","login":"esrs","name":"Esteban Serrano","avatar_url":"https://avatars-next.observableusercontent.com/ea4f125e103de7533553e6e6af913b86933bcf367d98be7a518da02ddeef349f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"02a8de92d80c5d36","slug":"three-js-examples","title":"Three.js examples","owner":{"id":"a311b2c901bccd79","login":"esrs","name":"Esteban Serrano"}},"type":"notebook","body":{"title":"Gradient background follows camera, flat - Three.js","cells":[{"id":242,"value":"# Gradient background follows camera, flat - Three.js","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"Gradient code from: https://observablehq.com/@mattdesl/perceptually-smooth-multi-color-linear-gradients","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":434,"value":"- To use as background when you only want a gradient as background\n- This solves the problem of generating a high res background gradient. Making scenes load faster while taking up less memory.\n- Orient plane so that:\n - It always looks towards camera, but doesn't tilt downwards or upwards\n - Remains in a fixed distance from camera\n- Added second camera (top) only for debugging","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":396,"value":"rendererIso.domElement","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"renderer.domElement","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"viewof test = targetArrow.rotation","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"// Continuously updates\n{\n while (true) {\n updateArrow();\n renderer.render(scene, camera);\n rendererIso.render(scene, cameraIso);\n yield null;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"### Orient plane towards camera","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":515,"value":"cameraArrow = arrowHelper(\"green\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"targetArrow = arrowHelper(\"yellow\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"finalArrow = arrowHelper(\"red\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"function arrowHelper(color) {\n const dir = new THREE.Vector3(1, 2, 0);\n\n //normalize the direction vector (convert to vector of length 1)\n dir.normalize();\n\n const origin = new THREE.Vector3(0, 0, 0);\n const length = 1;\n\n const arrowHelper = new THREE.ArrowHelper(dir, origin, length, color);\n scene.add(arrowHelper);\n return arrowHelper;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"### Draw plane","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":472,"value":"gradientTexture = {\n return new THREE.CanvasTexture(\n drawSplineGradient([\n [9, 9, 9],\n [178, 180, 193]\n ])\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"backgroundPlane = {\n const planeObj = new THREE.Object3D();\n // base plane geo\n const geometry = new THREE.PlaneGeometry(4, 2);\n\n const material = new THREE.MeshBasicMaterial({\n map: gradientTexture,\n side: THREE.DoubleSide\n });\n const plane = new THREE.Mesh(geometry, material);\n\n const materialUpper = new THREE.MeshBasicMaterial({\n color: new THREE.Color(`rgb(${9}, ${9}, ${9})`),\n side: THREE.DoubleSide\n });\n const planeUpper = new THREE.Mesh(geometry, materialUpper);\n planeUpper.position.set(0, 2, 0);\n\n const materialLower = new THREE.MeshBasicMaterial({\n color: new THREE.Color(`rgb(${178}, ${180}, ${193})`),\n side: THREE.DoubleSide\n });\n const planeLower = new THREE.Mesh(geometry, materialLower);\n planeLower.position.set(0, -2, 0);\n\n planeObj.add(planeUpper);\n planeObj.add(planeLower);\n planeObj.add(plane);\n const s = 5;\n planeObj.scale.set(s, s, s);\n // planeObj.rotation.eulerOrder = \"XYZ\";\n scene.add(planeObj);\n return planeObj;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"### Spline Gradient","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":355,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"randomGaussian = {\n // https://github.com/mattdesl/canvas-sketch-util/blob/master/random.js\n let _nextGaussian = null;\n let _hasNextGaussian = false;\n return function randomGaussian (mean = 0, standardDerivation = 1) {\n // https://github.com/openjdk-mirror/jdk7u-jdk/blob/f4d80957e89a19a29bb9f9807d2a28351ed7f7df/src/share/classes/java/util/Random.java#L496\n if (_hasNextGaussian) {\n _hasNextGaussian = false;\n var result = _nextGaussian;\n _nextGaussian = null;\n return mean + standardDerivation * result;\n } else {\n var v1 = 0;\n var v2 = 0;\n var s = 0;\n do {\n v1 = Math.random() * 2 - 1; // between -1 and 1\n v2 = Math.random() * 2 - 1; // between -1 and 1\n s = v1 * v1 + v2 * v2;\n } while (s >= 1 || s === 0);\n var multiplier = Math.sqrt(-2 * Math.log(s) / s);\n _nextGaussian = (v2 * multiplier);\n _hasNextGaussian = true;\n return mean + standardDerivation * (v1 * multiplier);\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"vec3 = {\n function add (o, a, b) {\n o = o || [];\n o[0] = a[0] + b[0];\n o[1] = a[1] + b[1];\n o[2] = a[2] + b[2];\n return o;\n }\n\n function sub (o, a, b) {\n o = o || [];\n o[0] = a[0] - b[0];\n o[1] = a[1] - b[1];\n o[2] = a[2] - b[2];\n return o;\n }\n\n function distSq (a, b) {\n const dx = b[0] - a[0];\n const dy = b[1] - a[1];\n const dz = b[2] - a[2];\n return dx * dx + dy * dy + dz * dz;\n }\n\n function dist (a, b) {\n return Math.sqrt(distSq(a, b))\n }\n \n return { add, sub, distSq, dist };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"sRGB = {\n function gammaToLinear (n) {\n return n <= 0.0404482362771082 ? n / 12.92 : Math.pow((n + 0.055) / 1.055, 2.4);\n }\n\n function linearToGamma (n) {\n return n <= 0.00313066844250063 ? n * 12.92 : 1.055 * Math.pow(n, 1 / 2.4) - 0.055;\n }\n \n return { gammaToLinear, linearToGamma };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"createContext = (w = 512, h = 128) => {\n if (width < w) {\n let ratio = w / h;\n w = width;\n h = w / ratio;\n }\n const context = DOM.context2d(w, h);\n return { context, width: w, height: h };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"drawSplineGradient = (colors, opts = {}) => {\n const {\n space = 'LinearRGB', // 'RGB', 'LinearRGB', 'CIELAB', 'Jzazbz' or 'XYB'\n jitter = true, // using some fudged gaussian jittering\n closed = false,\n tension = 0.5,\n type = 'uniform'\n } = opts;\n \n let from = (a) => a;\n let to = (a) => a;\n let jitterInSpace = a => a.map(n => n + randomGaussian(0, 0.5));\n if (space === 'LinearRGB') {\n from = rgb => rgb.map(n => sRGB.gammaToLinear(n / 255));\n to = srgb => srgb.map(n => Math.round(255 * sRGB.linearToGamma(n)));\n jitterInSpace = a => a.map(n => n + randomGaussian(0, 0.002));\n } \n\n const points = colors.map(rgb => from(rgb));\n \n const spline = CatmullRomSpline(points, {\n closed,\n tension,\n type\n });\n \n return ramp(u => {\n const sample = spline.getPoint(u);\n let point = jitter ? jitterInSpace(sample) : sample;\n return to(point);\n });\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"### Render loop","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":52,"value":"height = 350","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"scene = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x001b42);\n const grid = new THREE.GridHelper();\n scene.add(grid);\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"camera = {\n const fov = 40;\n const aspect = width / height;\n const near = 1;\n const far = 1000;\n const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);\n camera.position.set(10, 2, -2);\n camera.lookAt(new THREE.Vector3(0, 0, 0));\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"cameraIso = {\n const fov = 45;\n const aspect = width / height;\n const near = 1;\n const far = 1000;\n const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);\n camera.position.set(10, 2, -2);\n camera.lookAt(new THREE.Vector3(0, 0, 0));\n return camera;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"rendererIso = {\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(width, height);\n renderer.setPixelRatio(devicePixelRatio);\n const controls = new THREE.OrbitControls(cameraIso, renderer.domElement);\n controls.addEventListener(\"change\", () => renderer.render(scene, cameraIso));\n invalidation.then(() => (controls.dispose(), renderer.dispose()));\n return renderer;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"renderer = {\n const renderer = new THREE.WebGLRenderer({antialias: true});\n renderer.setSize(width, height);\n renderer.setPixelRatio(devicePixelRatio);\n const controls = new THREE.OrbitControls(camera, renderer.domElement);\n controls.addEventListener(\"change\", () => renderer.render(scene, camera));\n invalidation.then(() => (controls.dispose(), renderer.dispose()));\n return renderer;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"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 return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"