- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
我正在处理 Tavares WebGL tutorial , 并陷入泥泞之中。
我想使用 GL.points
绘制单个像素。我的阵列显然有问题。在 FF 或 Chrome Canary 中查看:
http://codepen.io/anon/pen/EPJVjK
/**
* Creates a program, attaches shaders, links the program.
* @param {WebGLShader[]} shaders. The shaders to attach.
*/
var createGLProgram = function( gl, shaders ) {
var program = gl.createProgram();
for ( var i = 0; i < shaders.length; i += 1 ) {
gl.attachShader( program, shaders[ i ] );
}
gl.linkProgram( program );
// Check the link status
var linked = gl.getProgramParameter( program, gl.LINK_STATUS );
if ( !linked ) {
// Something went wrong with the link
var lastError = gl.getProgramInfoLog( program );
window.console.error( "Error in program linking: " + lastError );
gl.deleteProgram( program );
return null;
}
return program;
};
var myCreateShader = function( gl, shaderScriptText, shaderType ) {
// Create the shader object
var shader = gl.createShader( shaderType );
// Load the shader source
gl.shaderSource( shader, shaderScriptText );
// Compile the shader
gl.compileShader( shader );
return shader;
};
// Get A WebGL context.
var canvas = document.getElementById( "canvas" );
var gl = canvas.getContext( "webgl", { antialias: false } )
var vertexShader = myCreateShader( gl,
`attribute vec2 a_position;
uniform vec2 u_resolution;
void main() {
// convert the rectangle from pixels to 0.0 to 1.0
vec2 zeroToOne = a_position / u_resolution;
// convert from 0 -> 1 to 0 -> 2
vec2 zeroToTwo = zeroToOne * 2.0;
// convert from 0 -> 2 to -1 -> +1 (clipspace)
vec2 clipSpace = zeroToTwo - 1.0;
// Flip 0,0 from bottom left to conventional 2D top left.
gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
}`, gl.VERTEX_SHADER );
var fragmentShader = myCreateShader( gl,
`precision mediump float;
uniform vec4 u_color;
void main() {
gl_FragColor = u_color;
}`, gl.FRAGMENT_SHADER );
var program = createGLProgram( gl, [ vertexShader, fragmentShader ] );
gl.useProgram( program );
// Store color location.
var colorLocation = gl.getUniformLocation( program, "u_color" );
// Look up where the vertex data needs to go.
var positionLocation = gl.getAttribLocation( program, "a_position" );
// Set the resolution.
var resolutionLocation = gl.getUniformLocation( program, "u_resolution");
gl.uniform2f( resolutionLocation, canvas.width, canvas.height);
// Create a buffer.
var buffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, buffer );
gl.enableVertexAttribArray( positionLocation );
// Send the vertex data to the shader program.
gl.vertexAttribPointer( positionLocation, 2, gl.FLOAT, false, 0, 0 );
// Set color to black.
gl.uniform4f( colorLocation, 0, 0, 0, 1);
function drawOneBlackPixel( gl, x, y ) {
// Fills the buffer with a single point?
gl.bufferData( gl.ARRAY_BUFFER, new Float32Array([
x, y,
0, y,
x, 0,
x, 0,
0, y,
0, 0]), gl.STATIC_DRAW );
// Draw one point.
gl.drawArrays( gl.POINTS, 0, 1 );
}
// These tests are supposed to be x,y coordinates from top left.
drawOneBlackPixel( gl, 0, 0 );
drawOneBlackPixel( gl, 1, 1 );
drawOneBlackPixel( gl, 2, 2 );
drawOneBlackPixel( gl, 3, 3 );
drawOneBlackPixel( gl, 4, 4 );
drawOneBlackPixel( gl, 5, 5 );
drawOneBlackPixel( gl, 6, 6 );
drawOneBlackPixel( gl, 7, 7 );
drawOneBlackPixel( gl, 10, 5 );
drawOneBlackPixel( gl, 15, 5 );
drawOneBlackPixel( gl, 20, 5 );
drawOneBlackPixel( gl, 12, 34 );
drawOneBlackPixel( gl, 42, 42 );
问题是像素没有正确渲染。 (0,0) 不在左上角绘制。而应该是像素对 Angular 线的东西却在两个像素 block 中“呈阶梯状”。一个可用的代码笔将是理想的。
作为第二个“奖励”问题,我接下来希望能够在单个 drawArrays
调用(调用 requestAnimationFrame
)上批处理多个像素。非常感谢有关如何最好地做到这一点的建议。
附言我读过:
How can I set the color of a pixel on a canvas using WebGL?
但我的错误似乎比这低一些。请不要建议我使用 canvas2D。我想要 webGL 的性能,我正在努力从头开始学习 :)
最佳答案
几件事:
首先,您需要将 gl_PointSize = 1.0;
添加到您的顶点着色器,以告知 webgl 您的 gl.POINT
的大小。
其次,您传入的坐标是每个像素的中心,而不是每个像素的左上角,因此,
function drawOneBlackPixel( gl, x, y ) {
// Fills the buffer with a single point?
gl.bufferData( gl.ARRAY_BUFFER, new Float32Array([
x+0.5, y+0.5]), gl.STATIC_DRAW );
// Draw one point.
gl.drawArrays( gl.POINTS, 0, 1 );
}
就是你想要的。
在这里使用 Codepen:http://codepen.io/anon/pen/pgBjBy .
奖励问题:你需要在这里做的是 gl.buffer
的手动内存管理(gasp)所以你可以做 gl.drawArrays( gl.POINTS, 0, x ) ;
绘制 x 点。例如,如果你想在 (0,0) (1,1), (2,2) 处绘制 3 个点,那么你需要执行 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0.5, 0.5 , 1.5, 1.5, 2.5, 2.5], gl.STATIC_DRAW)
然后是 gl.drawArrays(gl.POINTS, 0, 3);
例如,您可以首先分配一个 Float32Array 并为其分配 4 个点的空间,然后每当您调用 drawOneBlackPixel
时,它都会首先将 Float32Array 设置为 [p1x,p1y,0,0,0,0,0 ,0] 并在下一个 drawOneBlackPixel
上将数组设置为 [p1x,p1y,p2x,p2y,0,0,0,0] 等等。当然,您必须处理其他事情,例如根据需要增长和复制 Float32Array,并在进行更改时将 Float32Array 上传到 GPU。如何处理点的“删除”也是要记住的事情。
关于javascript - 使用 GL.points 在 WebGL 中绘制单个像素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35444202/
我正在使用 Visual Studio 2010。 我正在尝试在 OpenGL 中编写简单的 Camera 类。 我需要在 Camera.h 中包含 gl/gl.h gl/gl.h 已经包含在 mai
这个问题适用于了解 MapBox GL JS 内部结构的人。 我正在使用 MapBox GL JS 渲染多达 40,000 个多边形的地理 map ,每个多边形的颜色都基于该多边形的“所有者”。每个所
我想知道3D建筑物的“填充颜色”是否可以根据某些事件动态更改,例如将鼠标悬停在建筑物上时的mouseMoveEvent,突出显示3D建筑物。 最佳答案 试试这个 map.on('load', func
我正在使用 mapbox-gl 并从 osm2vectortiles.org 下载矢量切片 我想让 map 仅在已知多边形内可见,但找不到任何方法来实现这一点。 我可以想象几种解决这个问题的方法,但每
在探索javascript的过程中,我遇到了一个很莫名其妙的问题。序言是:我将不同 mime 类型的图像(主要是 pngs/jpgs)转换为具有 ImageBitmap 接口(interface)的位
我一直在使用行程图层可视化行程数据,并且尝试在每条行程线的开头放置一个图标。是否可以让多个图标随时间改变位置、出现和消失? Example of what I'm trying to do (red
我有一个 map 应用程序,它使用 Mapbox.com 来提供英国邮政编码边界的矢量切片。边界文件很大,不适合使用 TopoJSON 之类的工具进行下载。这很好用。 我还使用数据驱动的样式来格式化
将鼠标悬停在一个 3D 建筑上时,如何突出显示它?像 OSM 建筑物突出显示功能。 mapbox street v7 建筑图层特征属性好像很少,只包括: 拉伸(stretch) 高度 最小高度 类型
有没有办法隐藏/删除或禁用控件,例如 mapbox-gl-draw 中的控件? 我添加绘制控件如下 draw = mapboxgl.Draw({ drawing: true,
这可能非常简单,但我找不到如何在 deck.gl 的标签下方添加新层。它在底层使用 Mapbox GL JS。对于 mapbox gl,解释为 here . 我还在他们的文档中搜索了 z-index
我正在寻找一种方法,允许我像 Mapbox JS 一样为我的 map 创建一个简单的自定义标记。 深入浏览了网络,似乎没有明显或非常直接的方法来实现这一目标。我猜这是一个被错过的功能。 尝试过使用Ma
接下来的教程向我展示了以下代码: ... void update() { glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_TRIANGLES);
我正在寻找一种方法,允许我像 Mapbox JS 一样为我的 map 创建一个简单的自定义标记。 深入浏览了网络,似乎没有明显或非常直接的方法来实现这一目标。我猜这是一个被错过的功能。 尝试过使用Ma
我想在交互式 map 上显示一个圆圈的轮廓(无填充)但是,mapbox-gl-js 中的绘制选项似乎仅限于填充。 https://www.mapbox.com/mapbox-gl-style-spec
我在 kepler.gl 中工作并从数据库加载数据。如果数据库更新,我希望能够动态更新数据集。有没有办法向数据集添加一行并更新 map ? 我已经尝试删除数据集(使用 removeDataset)并将
如何在 mapbox-gl 中为图层文本字段添加背景颜色 .. 或者如何完成以便文本字段上有背景框 map.addLayer({ "id": "markers", "type": "s
我正在尝试使用 mapbox-gl 创建等值线图。在示例等值线 map 中,看起来他们根据要素的属性设置了要素的油漆填充颜色。有没有办法通过访问 map 来设置颜色? 即。我在称为 id 的功能属性中
我想根据最近的草皮更改 map 点击时的图标大小。我如何做到这一点? nearestBuilding.properties['icon-size'] = 0.2; 不起作用。 var retail =
我正在尝试在 MapBox GL JS 中聚类自定义标记,但我不知道如何将自定义标记图像从 url 获取到符号层?它要么不起作用,要么根本没有标记出现。它是如何完成的?我需要知道如何使用带有符号层的
寻找一种使用 Mapbox GL JS 获取 map 中心当前坐标的方法,就像在 Mapbox Studio 上一样(见下文) Mapbox Studio Screenshot 谢谢 最佳答案 Map
我是一名优秀的程序员,十分优秀!