无法在WebGL中创建沿轴旋转的3D Koch
Unable to create 3D Koch in WebGL with rotation along axis
最近我选择了WebGL将我的c++游戏移植到JS上。我成功地创建并旋转了一个三维科赫曲线的基本四面体。然后,由于WebGL中的着色器,我无法翻译代码。我解决这个问题的方法和在OpenGL中一样,计算新的几何点,然后,一旦三角形形成,我就把它画出来。这在WebGL中似乎不起作用。下面是代码…https://github.com/Horopter/koch-snowflake/blob/master/koch/koch3d.cpp这是WebGL的代码,直到我成功。特别是我需要翻译函数的帮助…
这里是index。html
//compiled by Santosh. Title : main.js
var gl;
function initGL(canvas) {
try {
gl = canvas.getContext("experimental-webgl");
gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
} catch (e) {
}
if (!gl) {
alert("Could not initialise WebGL, sorry :-(");
}
gl.enable(gl.DEPTH_TEST);
gl.clearColor(0.0, 0.0, 0.0, 0.0);
gl.viewport(0, 0, canvas.width, canvas.height);
}
function getShader(gl, id) {
var shaderScript = document.getElementById(id);
if (!shaderScript) {
return null;
}
var str = "";
var k = shaderScript.firstChild;
while (k) {
if (k.nodeType == 3) {
str += k.textContent;
}
k = k.nextSibling;
}
var shader;
if (shaderScript.type == "x-shader/x-fragment") {
shader = gl.createShader(gl.FRAGMENT_SHADER);
} else if (shaderScript.type == "x-shader/x-vertex") {
shader = gl.createShader(gl.VERTEX_SHADER);
} else {
return null;
}
gl.shaderSource(shader, str);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(shader));
return null;
}
return shader;
}
var shaderProgram;
function initShaders() {
var fragmentShader = getShader(gl, "shader-fs");
var vertexShader = getShader(gl, "shader-vs");
shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert("Could not initialise shaders");
}
gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
shaderProgram.vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);
shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
}
var mvMatrix = mat4.create();
var mvMatrixStack = [];
var pMatrix = mat4.create();
function mvPushMatrix() {
var copy = mat4.create();
mat4.set(mvMatrix, copy);
mvMatrixStack.push(copy);
}
function mvPopMatrix() {
if (mvMatrixStack.length == 0) {
throw "Invalid popMatrix!";
}
mvMatrix = mvMatrixStack.pop();
}
function setMatrixUniforms() {
gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
}
function degToRad(degrees) {
return degrees * Math.PI / 180;
}
var pyramidVertexPositionBuffer;
var pyramidVertexColorBuffer;
function initBuffers() {
pyramidVertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, pyramidVertexPositionBuffer);
var vertices = [
// Front face
1.0, 1.0, 1.0,//a
1.0, -1.0, -1.0,//b
-1.0, 1.0, -1.0,//c
// Right face
1.0, -1.0, -1.0,//b
-1.0, 1.0, -1.0,//c
-1.0, -1.0, 1.0,//d
// Left face
1.0, 1.0, 1.0,//a
-1.0, -1.0, 1.0,//d
1.0, -1.0, -1.0,//b
// Back face
-1.0, 1.0, -1.0,//c
-1.0, -1.0, 1.0,//d
1.0, 1.0, 1.0//a
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
pyramidVertexPositionBuffer.itemSize = 3;
pyramidVertexPositionBuffer.numItems = 12;
pyramidVertexColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, pyramidVertexColorBuffer);
var colors = [
// Front face
1.0, 0.0, 0.0, 1.0,//a
0.0, 1.0, 0.0, 1.0,//b
0.0, 0.0, 1.0, 1.0,//c
// Right face
0.0, 1.0, 0.0, 1.0,//b
0.0, 0.0, 1.0, 1.0,//c
1.0, 1.0, 1.0, 1.0,//d
// Left face
1.0, 0.0, 0.0, 1.0,//a
1.0, 1.0, 1.0, 1.0,//d
0.0, 1.0, 0.0, 1.0,//b
// Back face
0.0, 0.0, 1.0, 1.0,//c
1.0, 1.0, 1.0, 1.0,//d
1.0, 0.0, 0.0, 1.0,//a
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
pyramidVertexColorBuffer.itemSize = 4;
pyramidVertexColorBuffer.numItems = 12;
}
var rPyramid = 0;
function drawScene() {
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
mat4.identity(mvMatrix);
mat4.translate(mvMatrix, [0.0, 2.0, -8.0]);
mat4.scale(mvMatrix,[0.7,0.7,0.7]);
mvPushMatrix();
mat4.rotate(mvMatrix, degToRad(rPyramid), [0, 1, 0]);
gl.bindBuffer(gl.ARRAY_BUFFER, pyramidVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, pyramidVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, pyramidVertexColorBuffer);
gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, pyramidVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLES, 0, pyramidVertexPositionBuffer.numItems);
mvPopMatrix();
}
var lastTime = 0;
function animate() {
var timeNow = new Date().getTime();
if (lastTime != 0) {
var elapsed = timeNow - lastTime;
rPyramid += (90 * elapsed) / 1000.0;
}
lastTime = timeNow;
}
function tick() {
requestAnimationFrame(tick);
drawScene();
animate();
}
function webGLStart() {
var canvas = document.getElementById("gameCanvas");
initGL(canvas);
initShaders()
initBuffers();
gl.clearColor(0.0, 0.0, 0.0, 0.0);
gl.enable(gl.DEPTH_TEST);
tick();
}
webGLStart();
<script src="http://learningwebgl.com/lessons/lesson01/glMatrix-0.9.5.min.js"></script>
<script id="shader-fs" type="x-shader/x-fragment">
precision mediump float;
varying vec4 vColor;
void main(void) {
gl_FragColor = vColor;
}
</script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec4 aVertexColor;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
varying vec4 vColor;
void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
vColor = aVertexColor;
}
</script>
<canvas id="gameCanvas" style="border: none;" width="800" height="500"> </canvas>
像OpenGL ES 2.0及以上版本的WebGL不再有固定的函数管道。换句话说,它不支持glVertex
, glColor
等每次指定一个顶点的地方。原因是现代gpu效率极低且速度极慢。当然,在你的PC上,它足够快,可以让东西工作,但它甚至不接近gpu的工作方式,所以Khronos,设计OpenGL的人聪明地决定删除那些东西,特别是对于OpenGL ES, ES =嵌入式系统=智能手机,因为超级低效的方法消耗用户的电池,因为它实际上不是gpu的工作,这也意味着膨胀的驱动程序代码支持旧的低效方式。
你现在做的方式是你创建缓冲区(你在上面的例子中所做的),你把数据放在他们。通常,数据只需要创建一次。例如,如果你在画一个金字塔,为什么要在每一帧指定每个顶点,而你可以只指定一次,然后每次都重用它们。更有效率。
所以,你基本上需要将旧的已弃用的OpenGL c++代码重组为新的现代OpenGL ES代码。一种简单的方法可能是创建一些缓冲区创建器帮助器。示例
function OldOpenGLVertexHelper() {
var colors = [];
var vertices = [];
var normals = [];
var currentColor = [1, 1, 1, 1];
var currentNormal = [0, 0, 0];
var mode;
this.color3f = function(r, g, b) {
currentColor = [r, g, b, 1];
}
this.color4f = function(r, g, b, a) {
currentColor = [r, g, b, a];
}
this.color3fv = function(rgb) {
currentColor = rgb.concat(1);
}
this.color4fv = function(rgba) {
currentColor = rgba.slice();
}
this.normal3f = function(x, y, z) {
currentNormal = [x, y, z];
}
this.normal3fv = function(xyz) {
currentNormal = xyz.slice();
}
var vertex3f = function(x, y, z) {
colors.push(currentColor[0],
currentColor[1],
currentColor[2],
currentColor[3]);
normals.push(currentNormal[0],
currentNormal[1],
currentNormal[2]);
vertices.push(x, y, z);
}
this.vertex3f = vertex3f;
this.vertex3fv = function(xyz) {
vertex3f(xyz[0], xyz[1], xyz[2]);
};
this.end = function() {
return {
vertices: new Float32Array(vertices),
normals: new Float32Array(normals),
colors: new Float32Array(colors),
mode: mode,
};
});
this.begin = function(m) {
mode = m;
colors = [];
normals = [];
vertices = [];,
};
}
现在你可以这样做
var oldGL = new OldOpenGLVertexHelper();
oldGL.color3f(0.0,0.0,0.0);
oldGL.begin(gl.LINES);
oldGL.vertex3fv(a);
oldGL.vertex3fv(b);
oldGL.vertex3fv(b);
oldGL.vertex3fv(c);
oldGL.vertex3fv(c);
oldGL.vertex3fv(d);
oldGL.vertex3fv(d);
oldGL.vertex3fv(a);
oldGL.vertex3fv(a);
oldGL.vertex3fv(c);
oldGL.vertex3fv(b);
oldGL.vertex3fv(d);
var buffers = oldGL.end();
现在您可以访问buffers.vertices
, buffers.colors
, buffers.normals
等创建的缓冲区。
如何处理这些缓冲区取决于你。理想情况下,如果它们不改变每一帧,你可以在初始化时创建它们并重用它们。请看你上面发布的代码,它为金字塔创建了一组缓冲区
否则如果你想做旧的OpenGL所做的你可以在那个点立即绘制
gl.bindBuffer(gl.ARRAY_BUFFER, somebufferForPositions);
gl.bufferData(gl.ARRAY_BUFFER, buffers.vertices, gl.DYNAMIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, somebufferForColors);
gl.bindBuffer(gl.ARRAY_BUFFER, buffers.colors, gl.DYNAMIC_DRAW);
// set your attributes
...
gl.drawArrays(buffers.mode, 0, buffers.vertices.length / 3);
// NOTE: you'll need to change that divided by 3 if buffers.mode
// is lines (2) or points (1)
这基本上是旧的OpenGL驱动程序为你做的
我不知道这是否足以帮助你。既然你是WebGL的新手,我建议你多读一些教程。对于绘制多个对象可能会有帮助。
- 使用 C++在 OpenGL 中移动自动旋转的 3D 多边形
- 如何使用偏航、俯仰和滚动旋转 3D 矢量?
- 3D透视图投影,带有摄像头旋转
- 从特征::等距3d提取旋转时出错
- VTK:旋转3D模型并捕获其深度图
- 给定的3D旋转矩阵和3D方向矢量发现角差
- 在3D中合并旋转
- Android OpenCV - 每次旋转是否有可能捕捉到不同的3D对象点击?
- 特征:将矩阵3d旋转转换为四元数
- 围绕另一个 3D 点旋转一个 3D 点
- 在3D中旋转针孔相机
- 如何在 3D 场景中旋转单个对象
- 使用 DirectX11 进行相机 3D 旋转
- 如何约束 3D 旋转(欧拉)
- 如何使用glm旋转3D相机
- 如何在3D中围绕相同的枢轴/点旋转多个对象
- 无法在WebGL中创建沿轴旋转的3D Koch
- Turbo c++ 3D旋转问题
- 围绕绝对轴旋转3d模型
- 旋转 3D 对象(OSG & vc++)