Emscripten OpenGL ES视口变换异常 画布缩放拉伸黑屏问题

所有异常的核心原因是混淆了Canvas的CSS显示尺寸与内部WebGL绘图缓冲区的实际像素尺寸，和视口变换本身逻辑无关：

• 你给Canvas设置的style="width:100%;height:100%"仅控制Canvas在页面布局中占据的显示区域大小，不会修改Canvas内部用于承载WebGL渲染结果的绘图缓冲区尺寸。如果没有主动设置Canvas标签上的原生width、height属性，绘图缓冲区会始终保持默认尺寸，和CSS拉伸后的显示尺寸无关。
• 你之前传入glViewport和透视投影矩阵的宽高，是CSS渲染后的显示尺寸，这个尺寸和实际绘图缓冲区尺寸不匹配，会导致WebGL的坐标映射范围超出缓冲区边界，最终渲染的图形偏移到可视区域外，表现为黑屏。你手动将视口参数设为350*150时能正常显示，本质是这个值刚好匹配了你当前环境下Canvas的默认绘图缓冲区尺寸，坐标映射逻辑正常，图形才能正常进入视野。
• 调整Canvas尺寸时出现的图形拉伸、挤压问题也是同一原因：绘图缓冲区的宽高比和CSS显示区域的宽高比不一致，缓冲区里渲染完成的图像被CSS强制缩放适配显示区域，自然会出现变形。
• 额外注意：你投影矩阵计算宽高比的代码(float)(width/height)存在整数除法bug，如果width和height是整数类型，括号内的除法会先做整数截断，再转为浮点数，得到的宽高比结果完全错误，这也会进一步加剧渲染异常。

按照以下流程配置即可实现基于Canvas实际尺寸的正确渲染：

• 监听Canvas尺寸变化（包括首次加载、窗口大小调整、父容器尺寸变动等场景），每次触发时先获取Canvas当前的CSS显示尺寸，再将尺寸同步设置到Canvas的原生width、height属性上，这一步会自动将WebGL绘图缓冲区尺寸重置为和显示尺寸匹配：

// Emscripten环境下获取Canvas CSS显示尺寸
double css_width, css_height;
emscripten_get_element_css_size("#webgl_main_canvas", &css_width, &css_height);
// 适配高DPI屏幕，避免渲染模糊，不需要高DPI可以去掉dpr乘算
float dpr = emscripten_get_device_pixel_ratio();
int canvas_width = static_cast<int>(css_width * dpr);
int canvas_height = static_cast<int>(css_height * dpr);
// 同步设置Canvas内部绘图缓冲区尺寸
emscripten_set_canvas_element_size("#webgl_main_canvas", canvas_width, canvas_height);

• 用同步后的缓冲区实际尺寸更新视口与投影矩阵：

// 更新视口范围
glViewport(0, 0, static_cast<GLfloat>(canvas_width), static_cast<GLfloat>(canvas_height));
// 更新透视投影矩阵，注意先转浮点数再做除法，避免整数截断
projection = glm::perspective(
    glm::radians(45.0f), 
    static_cast<float>(canvas_width) / static_cast<float>(canvas_height), 
    0.1f, 
    1000.0f
);

• 你当前使用的视图矩阵配置没有问题，相机位于(0,0,1)朝向-z轴方向，只要渲染的几何体位于视锥范围内（即z坐标在-999到-0.1区间内）就可以被正常捕捉到，不需要额外调整。

内容的提问来源于stack exchange，提问作者vishal kumar