shader 相关问题

着色器是用于对计算机图形中的几何或像素数据执行计算的程序。



Hello当前我正在开发一个配置器,但文本有一些问题。我试图通过着色器上的3D模型在Canvas上呈现文字,但其表现很奇怪。我无法设置宽度,他...

export const createTextCanvasTexture = (text, color, font) => { // Create a temporary canvas to calculate text dimensions const canvasGetDimensions = document.createElement("canvas"); const ctxGetDimensions = canvasGetDimensions.getContext("2d"); // Set an initial font size for measuring let fontSizeForDimensions = 256; ctxGetDimensions.font = `${fontSizeForDimensions}px ${font}`; // Measure the text width based on the font size const textWidth = ctxGetDimensions.measureText(text).width; // Calculate the canvas height based on the font size const textHeight = fontSizeForDimensions; // Create the actual canvas for the texture const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); // Set the canvas dimensions dynamically based on the text size canvas.width = textWidth; canvas.height = textHeight; // Reapply font and styles after setting canvas dimensions ctx.font = `${fontSizeForDimensions}px ${font}`; console.log("text", color); ctx.fillStyle = color; // Text color ctx.textAlign = "center"; // Center text horizontally ctx.textBaseline = "middle"; // Center text vertically ctx.fillText(text, canvas.width / 2, canvas.height / 2); // Draw the text in the center // Create and return the texture const canvasTexture = new THREE.CanvasTexture(canvas); canvasTexture.flipY = false; return canvasTexture; };

回答 0 投票 0


glsl中的“平面”预选赛?

我正在阅读“官方OpenGL指南”,在他们教授材料照明的部分中,他们突然使用了“平面”预选程序作为片段着色器中的输入变量。 我谷歌google

回答 2 投票 0

如何在两个片段之间检查手动创建的深度缓冲区的更高点

我真的很陌生,这是着色器编程和尝试(也许是错误的),以制作一个我正在制作的小游戏的照明系统。引擎是2D

回答 1 投票 0

云着色器问题(godot)

我在戈多做了一个天空着色器,但我有一个错误 vec2 sky_uv = eyedir.xz / eyedir.y; vec3 clouds = texture(cloud_texture,sky_uv * cloud_scale * time * cloud_direction * 0.001).rgb = texture(

回答 1 投票 0

在片段着色器中阅读深度缓冲区应该放弃性能吗?

我知道在片段着色器中写入深度值有绩效含义。但是,我发现我是否会像阅读glfragcoord.z(只有z,而不是x和y)那样,我的帧速率来回...

回答 1 投票 0




Gl_primitivecountext:未申报的标识符

error: 'gl_PrimitiveCountEXT' : undeclared identifier

回答 1 投票 0


犹太2D行星 /弯曲世界着色器

我一直在尝试使用着色器创建2D“假星”的效果,但是在起作用的同时,结果并不是很棒。

回答 3 投票 0

有一种方法可以找出为什么在我的程序生成的3D模型中剔除前脸而不是背面?

const marchingCubes = (scalarField, dims, threshold) => { const geometry = new THREE.BufferGeometry(); const vertices = []; const colors = []; const normals = []; const pA = new THREE.Vector3(); const pB = new THREE.Vector3(); const pC = new THREE.Vector3(); const cB = new THREE.Vector3(); const aB = new THREE.Vector3(); const color = new THREE.Color(); for(let z = 0; z < dims[2] - 1; z++) { for(let y = 0; y < dims[1] - 1; y++) { for(let x = 0; x < dims[0] - 1; x++) { const cube = getCube(scalarField, x, y, z); const cubeIndex = getCubeIndex(cube, threshold); const edges = EdgeMasks[cubeIndex]; if(edges === 0) { continue; } const interpolatedVertices = interpolateEdges(cube, edges, threshold); const triangles = triangleTable[cubeIndex] let i = 0; while(triangles[i] != -1) { const v1 = interpolatedVertices[triangles[i]]; const v2 = interpolatedVertices[triangles[i + 1]]; const v3 = interpolatedVertices[triangles[i + 2]]; pA.set(v1[0], v1[1], v1[2]); pB.set(v2[0], v2[1], v2[2]); pC.set(v3[0], v3[1], v3[2]); cB.subVectors(pC, pB); aB.subVectors(pA, pB); cB.cross(aB); cB.normalize(); const nx = cB.x; const ny = cB.y; const nz = cB.z; const n0 = [nx, ny, nz]; const vx = (x / dims[0]) + 0.5; const vy = (y / dims[1]) + 0.5; const vz = (z / dims[2]) + 0.5; color.setRGB(vx, vy, vz); const c0 = [color.r, color.g, color.b]; vertices.push(...v1, ...v2, ...v3); normals.push(...n0, ...n0, ...n0); colors.push(...c0, ...c0, ...c0); i += 3; } } } } geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3)); geometry.setAttribute('normal', new THREE.Float32BufferAttribute(normals, 3)); geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3)); geometry.computeBoundingSphere(); return geometry; } const WebApplication = () => { const Ref = useRef(null); const handleButtonClick = async () => { const scene = new THREE.Scene(); scene.add(new THREE.AmbientLight(0x444444, 3)); const light1 = new THREE.DirectionalLight(0xffffff, 1.5); light1.position.set(1, 1, 1); scene.add(light1); const light2 = new THREE.DirectionalLight(0xffffff, 4.5); light2.position.set(0, -1, 0); scene.add(light2); const renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0x000000, 0.5); renderer.setPixelRatio(window.devicePixelRatio); if(Ref.current) { Ref.current.innerHTML = ''; Ref.current.appendChild(renderer.domElement); } const camera = new THREE.PerspectiveCamera(27, window.innerWidth / window.innerHeight, 1, 3500); const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.5; controls.update(); . . . const scalarField = generateScalarField(int16Array, dims); const threshold = 0.166666666665; const size = 5; const sigma = 1.0; const kernel = createGaussianKernel(size, sigma); const gaussianFilter = applyGaussianFilter(scalarField, dims, kernel); let geometry = marchingCubes(gaussianFilter, dims, threshold); let material = new THREE.MeshBasicMaterial({color: 0xaaaaaa, specular: 0xffffff, shininess: 250, side: THREE.FrontSide, vertexColors: true}) const cubes = new THREE.Mesh(geometry, material); cubes.position.set(Math.trunc(-(dims[0] / 2)), Math.trunc(-(dims[1] / 2)), Math.trunc(-(dims[2] / 2))); scene.add(cubes); camera.position.z = Math.max(dims[0], dims[1], dims[2]) * 1.5; function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); } return ( <div> <button onClick={handleButtonClick}>vroom vroom</button> <div ref={Ref} style={{ width: "100vw", height: "100vh" }}></div> </div> ); };

回答 1 投票 0

大气光散射实施

https://drivers.amd.com/developer/gdc/gdc02_hoffmanpreetham.pdf

回答 1 投票 0





最新问题
© www.soinside.com 2019 - 2025. All rights reserved.