伸展或挤压的视口转换和几何形状中的混乱

Question

我使用emscripten设置了露天设置，以在HTML画布上绘制地理器。 目前，我面临两个问题，

1. 我不确定视口转换是否正常工作，
2. 几何形状会在帆布上挤压或伸展。

画布是使用以下行生成的：

<canvas id="webgl_main_canvas" style={{width:"100%",height:"100%"}} />

现在，该画布的宽度和高度，我设置了glviewport配置和投影矩阵，请使用：

glViewport(0, 0, (GLfloat)canvas_width, (GLfloat)canvas_height);

projection = glm::perspective(glm::radians(45.0f), (float)(width/height), 0.1f, 1000.0f);

当我尝试渲染某些东西时，结果是黑屏黑屏，这里的几何形状是实际的，但是在屏幕外面绘制了右上角的地方。

但是，如果我使用宽度= 350和高度= 150设置GlviewPort配置，则几何形状可见 >。关于此维度的特殊之处在于，它是画布的默认维度，就好像是在使用以下方式创建的：

<canvas id="webgl_main_canvas"/>

inline样式 style = {width：{width：“ 100％”，高度：“ 100％”}} < /代码>仅告诉画布占据其父级的100％面积。

因此，总而言之，创建像This ＆lt; canvas ID =“ WebGl_Main_Canvas” style = {width：“ 100％”，高度：“ 100％”}} /＆gt; < /code>：

1. 如果我render render （设置GlviewPort和投影矩阵后）使用实际的宽度和高度，我会得到一个黑屏。
2. 但是，如果我使用dimention（350,150），则可以看到地理。

如下所述， style = {{width：“ 100％”，高度：“ 100％”}} ，整个Geomatry是由于 style = {{width：“ width：“ width：width：width：width：width：”，然后使用当前宽度和高度进行了顶点。

这里有什么问题？我想在这里正确使用实际的宽度和高度。

另外，为此，我正在使用类似的方式创建视图矩阵：

glm::vec3 cameraPos  = glm::vec3(0,0,1);
glm::vec3 camerafront  = glm::vec3(0, 0, -1);
glm::vec3 cameraUp  = glm::vec3(0, 1, 0);
view = glm::lookAt(cameraPos, cameraPos + camerafront, cameraUp);

Answer 1

找到了这个问题，因此基本上HTML帆布具有2种尺寸，一个是绘制式式尺寸，另一个是通过CSS显示的大小， [如下所述] [4] < /code>，我做错了什么不是设置我的drauctbuffer siz，因此它总是选择300x150的默认尺寸，而在设置GlviewPort的同时，我使用的GlviewPort的宽度和高度是wrt wrt the CSS样式问题。

解决方案是定义这样的画布：

<canvas id="webgl_main_canvas" width="1200" height="800" style={{width:"100%",height:"100%"}} />

shere width =“ 1200” height =“ 800” 是acuatlly设置html帆布的绘图式延误大小。

而且，只要您想调整大小，只需进行重新更改这些值即可。