主页 / user-128511

gman's questions

Martin Hope
gman
Asked: 2024-02-03 04:32:23 +0800 CST
  • 5

这不是一个 CSS 网格问题（尽管如果 CSS 网格能解决它那就太好了。但我不认为 CSS 网格会解决它）。

我的内容包含 1 到 N 个高数据矩形，后跟 5 个或更多短数据矩形。目前，如果屏幕宽度足够 5 宽，则显示如下

+--+ +--+ +--+
|  | |  | |  |
|  | |  | |  |
|  | |  | |  |
|  | |  | |  |
+--+ +--+ +--+

+--+ +--+ +--+ +--+ +--+
|  | |  | |  | |  | |  |
+--+ +--+ +--+ +--+ +--+

当屏幕变窄时，它会像这样塌陷

+--+ +--+
|  | |  |
|  | |  |
|  | |  |
|  | |  |
+--+ +--+

+--+
|  |
|  |
|  |
|  |
+--+

+--+ +--+
|  | |  |
+--+ +--+

+--+ +--+
|  | |  |
+--+ +--+

+--+
|  |
+--+

最终转到 1 列

我想更改它，当宽度足够 5 列时执行此操作

（目标）

+--+ +--+ +--+ +--+ +--+
|  | |  | |  | |  | |  |
|  | |  | |  | +--+ +--+
|  | |  | |  | 
|  | |  | |  | +--+ +--+
+--+ +--+ +--+ |  | |  |
               +--+ +--+

               +--+
               |  |
               +--+

如果是超宽的话也不错

+--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+
|  | |  | |  | |  | |  | |  | |  | |  |
|  | |  | |  | +--+ +--+ +--+ +--+ +--+
|  | |  | |  | 
|  | |  | |  | 
+--+ +--+ +--+

注意：没有像素大小，也没有已知的宽度。

这是我目前拥有的内容的存储库

#sections {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
}
.tall {
  background-color: #ccf;
  margin: 3px;
  padding: 1em;
  display: inline-block;
}
#shorts {
  flex: 1 1 auto;
  display: inline-flex;
  flex-wrap: wrap;
  min-width: 0;
}
.short {
  margin: 3px;
  padding: 1em;
  background-color: #fcc;
  display: inline-block;
}
<div id="content">
  <div id="sections">
    <div class="tall">t<br>a<br>l<br>l<br></div>
    <div class="tall">t<br>a<br>l<br>l<br></div>
    <div class="tall">t<br>a<br>l<br>l<br></div>
    <div id="shorts">
      <div class="short">s</div>
      <div class="short">s</div>
      <div class="short">s</div>
      <div class="short">s</div>
      <div class="short">s</div>
    </div>
  </div>
</div>

您需要调整窗口大小才能看到布局变化。

这并不能达到上面的目的。相反，如果屏幕不够宽，无法容纳 8 个部分，则会将所有最后 5 个短部分放在高部分下方。比这个小，它们就会像预期的那样崩溃。媒体查询不是解决方案，因为我不知道各部分的大小。另请注意：我希望小区域保持在一起。我不希望其中一些位于高处，一些位于下方（我认为可以通过将所有内容都设置为内联块来做到这一点）。

事实上，如果只有 4 个人的空间，那么我想要这个

+--+ +--+ +--+ +--+
|  | |  | |  | |  |
|  | |  | |  | +--+
|  | |  | |  | 
|  | |  | |  | +--+
+--+ +--+ +--+ |  |
               +--+

               +--+
               |  |
               +--+

               +--+
               |  |
               +--+

               +--+
               |  |
               +--+

值得重申的是，高段和矮段的数量未知，但 1-3 个高和 4-7 个矮是正常范围。我只是选择了3高5矮作为例子。

另外，在上面的示例中，高大约是矮的两倍，但在实际代码中，高是矮的 7 倍。因此，像上一个示例中那样堆叠它们比图表效果更好。

有没有办法实现让一组小元素在右侧折叠直到没有一个适合的目标（仅限CSS）？

html
Martin Hope
gman
Asked: 2023-08-27 05:23:50 +0800 CST
  • 7

即使问题中的示例是 WebGL，也将其标记为 OpenGL，因为 OpenGL 领域专家应该能够回答这个问题。这里有一个 OpenGL 存储库

我正在尝试以与采样器基于纹理坐标导数相同的方式计算纹理 mip 级别。

我在这里和其他地方看到了很多答案。例如

所有这 3 个都说计算是

   vec2  dx_vtc        = dFdx(texture_coordinate);
   vec2  dy_vtc        = dFdy(texture_coordinate);
   float delta_max_sqr = max(dot(dx_vtc, dx_vtc), dot(dy_vtc, dy_vtc));

   mip_level = 0.5 * log2(delta_max_sqr);

鉴于此，我写了一个测试。在测试中我有 2 个着色器。

  • 第一个着色器使用纹理坐标和采样纹理来绘制四边形。纹理有 7 个 mip 级别，每个级别都是不同的纯色。当我增加纹理坐标的范围时，我应该看到不同的 mip 被选择（使用 NEAREST_MIPMAP_NEAREST）。这有效?

  • 第二个着色器通过使用上面的公式计算 mip 级别，然后使用该 mip 级别从表中选择颜色来绘制四边形，表中的颜色与纹理中的颜色相匹配。这不起作用?。我所看到的都是红色（第一种颜色）。

这是第二个着色器

#version 300 es
precision highp float;

in vec2 v_texCoord;

out vec4 outColor;

const vec4 colors[8] = vec4[8](
  vec4(  1,   0,   0, 1), // 0: red
  vec4(  1,   1,   0, 1), // 1: yellow
  vec4(  0,   1,   0, 1), // 2: green
  vec4(  0,   1,   1, 1), // 3: cyan
  vec4(  0,   0,   1, 1), // 4: blue
  vec4(  1,   0,   1, 1), // 5: magenta
  vec4(0.5, 0.5, 0.5, 1), // 6: gray
  vec4(  1,   1,   1, 1));// 7: white

void main() {
  vec2 dx = dFdx(v_texCoord);
  vec2 dy = dFdy(v_texCoord);
  float deltaMaxSq = max(dot(dx, dx), dot(dy, dy));
  float mipLevel = 0.5 * log2(deltaMaxSq);
  
  outColor = colors[int(mipLevel)];
}

也许我只是有一个错字，但我尝试了各种调试方法

  • 我尝试可视化第二个着色器中的纹理坐标。他们显然是正确的
  • 我尝试确保索引颜色有效。这就是作品。
  • 我尝试通过从着色器写入来可视化 mip 级别mipLevel / 7.0，因此当 mip 级别达到 7 时，四边形应该变得更亮。这是行不通的。

我究竟做错了什么？

html, body {
  margin: 0;
  font-family: monospace;
  height: 100%;
}
canvas {
  display: block;
  width: 100%;
  height: 100%;
}
<canvas id="c"></canvas>

<script type="module">
import * as twgl from 'https://twgljs.org/dist/5.x/twgl-full.module.js';

const vs = `#version 300 es
uniform mat4 u_worldViewProjection;
uniform mat3 u_texMat;

out vec2 v_texCoord;

const vec2 position[6] = vec2[6](
  vec2(0, 0),
  vec2(1, 0),
  vec2(0, 1),
  vec2(0, 1),
  vec2(1, 0),
  vec2(1, 1));

void main() {
  vec2 p = position[gl_VertexID];
  v_texCoord = (u_texMat * vec3(p, 1)).xy;
  gl_Position = u_worldViewProjection * vec4(p, 0, 1);
}
`;
const fsTex = `#version 300 es
precision highp float;

in vec2 v_texCoord;

uniform sampler2D u_tex;

out vec4 outColor;

void main() {
  outColor = texture(u_tex, v_texCoord);
}
`;
const fsMipLevel = `#version 300 es
precision highp float;

in vec2 v_texCoord;

out vec4 outColor;

const vec4 colors[8] = vec4[8](
  vec4(  1,   0,   0, 1), // 0: red
  vec4(  1,   1,   0, 1), // 1: yellow
  vec4(  0,   1,   0, 1), // 2: green
  vec4(  0,   1,   1, 1), // 3: cyan
  vec4(  0,   0,   1, 1), // 4: blue
  vec4(  1,   0,   1, 1), // 5: magenta
  vec4(0.5, 0.5, 0.5, 1), // 6: gray
  vec4(  1,   1,   1, 1));// 7: white

void main() {
  vec2 dx = dFdx(v_texCoord);
  vec2 dy = dFdy(v_texCoord);
  float deltaMaxSq = max(dot(dx, dx), dot(dy, dy));
  float mipLevel = 0.5 * log2(deltaMaxSq);
  
  // mipLevel = mod(gl_FragCoord.x / 16.0, 8.0);  // comment in to test we can use the colors

  outColor = colors[int(mipLevel)];

  // outColor = vec4(mipLevel / 7.0, 0, 0, 1);  // comment in to visualize another way
  // outColor = vec4(fract(v_texCoord), 0, 1);  // comment in to visualize texcoord
}
`;

const colors = [
  '#F00',
  '#FF0',
  '#0F0',
  '#0FF',
  '#00F',
  '#F0F',
  '#888',
  '#FFF',
];


function createMips(colors) {
  const ctx = document.createElement('canvas').getContext('2d');
  const numMips = colors.length;
  return colors.map((color, i) => {
    const size = 2 ** (numMips - i - 1);
    ctx.canvas.width = size;
    ctx.canvas.height = size;
    ctx.fillStyle = color;
    ctx.fillRect(0, 0, size, size);
    return ctx.getImageData(0, 0, size, size);
  });
}

function main() {
  const m4 = twgl.m4;
  const gl = document.getElementById("c").getContext("webgl2");
  if (!gl) {
    alert("Sorry, this example requires WebGL 2.0");  // eslint-disable-line
    return;
  }

  const texProgramInfo = twgl.createProgramInfo(gl, [vs, fsTex]);
  const mipProgramInfo = twgl.createProgramInfo(gl, [vs, fsMipLevel]);

  const texImage = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texImage);
  const data = createMips(colors);
  data.forEach(({width, height, data}, level) => {
    gl.texImage2D(gl.TEXTURE_2D, level, gl.RGBA8, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
  });
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST_MIPMAP_NEAREST);

  const lerp = (a, b, t) => a + (b - a) * t;

  function render(time) {
    time *= 0.001;
    twgl.resizeCanvasToDisplaySize(gl.canvas);
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
    gl.clearColor(0.3, 0.3, 0.3, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);

    const uniforms = {};

    const s = lerp(1, 128, Math.sin(time) * 0.5 + 0.5);
    uniforms.u_texMat = [
      s, 0, 0,
      0, s, 0,
      0, 0, 1,
    ];
    uniforms.u_worldViewProjection = m4.translation([-1.01, -0.5, 0]);

    gl.useProgram(texProgramInfo.program);
    twgl.setUniforms(texProgramInfo, uniforms);
    gl.drawArrays(gl.TRIANGLES, 0, 6);

    uniforms.u_worldViewProjection = m4.translation([0.01, -0.5, 0]);

    gl.useProgram(mipProgramInfo.program);
    twgl.setUniforms(mipProgramInfo, uniforms);
    gl.drawArrays(gl.TRIANGLES, 0, 6);

    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);
}

main();
</script>

opengl