WebGL

WebGL: async operations?

由 妖精的绣舞 提交于 2019-12-06 04:48:31
I'd like to know if there are any async calls for WebGL that one could take advantage of? I have looked into Spec v1 and Spec v2 they don't mention anything. In V2, there is a WebGL Query mechanism which I don't think is what I'm looking for. A search on the web didn't come up with anything definitive. There is this example and is not clear how the sync and async version differ. http://toji.github.io/shader-perf/ Ultimately I'd like to be able to some of all of these asynchronously: readPixels texSubImage2D and texImage2D Shader compilation program linking draw??? There is a glFinish operation

How to create latitudinal (horizontal) contour lines in GLSL?

由 眉间皱痕 提交于 2019-12-06 04:47:13
问题 I'm aiming for this effect: (horizontal-only contour lines): I did find this example, however it creates horizontal and vertical contour lines. I can't quite wrap my head around how the call to fwidth() is generating the lines. uniform float gsize;//size of the grid uniform float gwidth;//grid lines'width in pixels varying vec3 P; void main() { vec3 f = abs(fract (P * gsize)-0.5); vec3 df = fwidth(P * gsize); float mi=max(0.0,gwidth-1.0), ma=max(1.0,gwidth);//should be uniforms vec3 g=clamp(

Three.js / Webgl X-RAY effect

由 …衆ロ難τιáo~ 提交于 2019-12-06 04:27:57
How to achieve an x-ray-style effect in three.js / webgl? Some sort of this UPD I need real-time render with this stuff, not a still image. This can be done with shaders, that change density in non-linear way on overlaps based on distance. I briefly understand theory, but have no practice, that is why I need help with this Ok, got acceptable result with this: <!DOCTYPE html> <html> <head> <title>X-ray</title> <script type="text/javascript" src="js/three.js/build/three.js"></script> <script type="text/javascript" src="js/three.js/examples/js/loaders/OBJLoader.js"></script> <script src="http:/

Multitexture GL_TEXTURE1 issue on WebGL

由 爱⌒轻易说出口 提交于 2019-12-06 04:23:02
问题 I am learning to use multitexture on WebGL. I have the following shader code snippets: uniform int flag; uniform sampler2D texture0; uniform sampler2D texture1; varying vec2 v_texCoord; void main() { vec2 texCoord = vec2(v_texCoord.s, 1.0 - v_texCoord.t); vec4 texel0 = texture2D(texture0, texCoord); vec4 texel1 = texture2D(texture1, texCoord); if (1 == flag) { gl_FragColor = texel1; } else { gl_FragColor = texel0; } } Also, my JavaScript code snippets: gl.uniform1i(gl.getUniformLocation(gl

Object Overflow Clipping Three JS

由 和自甴很熟 提交于 2019-12-06 03:57:56
问题 Using three js is there anyway to define a clipping region for an object? I have for example a parent which contains child objects, I would like to clip the child objects based on the viewport. Something like... // Create container and children var container = new THREE.Object3D(); for(var i = 0; i < 100; i++) { var geometry = new THREE.PlaneGeometry(i, 0, 0); var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); var child = new THREE.Mesh(geometry, material); container.add(child); }

requestFullscreen() is deprecated on insecure origin, and support will be removed in the future

由 让人想犯罪 __ 提交于 2019-12-06 03:33:12
问题 I'm getting this message in the console. requestFullscreen() is deprecated on insecure origins, and support will be removed in the future. You should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details. I think that removing full screen functionality for regular http is not a good idea. So will videos, games, and all casual full screen web applications require https too? I know that F11(Windows) or Cmd + F(Mac) will bring the app

Inline webgl shader code in javascript

由 血红的双手。 提交于 2019-12-06 03:30:26
问题 I'm writing a simple Javascript library that makes use of some WebGL code. I'd like to include the shader sources inline in the .js file, because my alternatives are to include them as script tags in each page, or to have them as separate files which are loaded as AJAX. Neither of these options are particularly modular. However, due to the lack of multi-line strings in javascript, I don't have any good ideas for how to inline the WebGL code. Is there an approach I'm not thinking of? 回答1: Use

How to make a normal map in THREE.js correctly?

由 断了今生、忘了曾经 提交于 2019-12-06 03:24:48
问题 I just tried to apply the Normal map Ninja demo to a cube in my scene with the following code - using new latest Three.js version from dev branch: // common material parameters var ambient = 0x050505, diffuse = 0x331100, specular = 0xffffff, shininess = 10, scale = 23; // normal map shader var shader = THREE.ShaderUtils.lib[ "normal" ]; var uniforms = THREE.UniformsUtils.clone( shader.uniforms ); uniforms[ "enableAO" ].value = true; uniforms[ "enableDiffuse" ].value = false; uniforms[

WebGL display framebuffer?

由 天涯浪子 提交于 2019-12-06 03:18:46
I used the WEBKIT_WEBGL_depth_texture Extension. And init the buffers below. But how am I able to draw this framebuffer?? I'm totaly stuck right now. -.- function InitDepthtextures (){ var size = 256; // Create a color texture var colorTexture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, colorTexture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texImage2D

Interactive 3D model without WebGL for iOS

由 一世执手 提交于 2019-12-06 03:03:45
问题 I want to make something similar to this - http://appserv.kfshrc.edu.sa/Default/Health/Anantomy.aspx, but without using flash and able to work on Mobile Safari on iPad. I played with WebGL, it's great but doesn't work on iOS yet (though it is there in Mobile Safari, but it's just for iAds). I also tried with CSS 3D transformations, but it doesn't work properly. So, what can I use to implement this for iOS Mobile Safari? 回答1: I think it would be worth looking into three.js, a JavaScript 3d
订阅 WebGL