WebGL

问题 I'm trying to optimize and existing piece of WebGl JavaScript code, and the bottleneck of the code is at an if statement with return at the end however, the return statement doesn't seem to return anything. function render() { if (object.loading) return; // there is no value after return // Loading is a boolean indicating if information is still being parsed from a file or not } This is the first time I'm seeing code that has a return statement without a succeeding variable specified to be

问题 one three.js example of video on iPhone 6s did not work( only black panel) https://stemkoski.github.io/Three.js/Video.html But the example works fine on PC desktop browser. It failed in Safari & Chronme on iPhone 6s 回答1: As of 2019 the solution for iOS is you have to start the video in user gesture event like 'click' or 'touchstart' Otherwise the browser will refuse to play the video someElement.addEventListener('click', () => { videoElement.play(); }); you have to set playsInline to true

问题 I would like to use interactive 3D models in a web page. The required functionality is: Import dxf file which defines & displays a room. Add/move prebuilt objects from javascript Add/move lamp which cast shadows from javascript Return room dimensions to javascript Return object positions to javascript Can I import dxf files into any WebGL engine? I have a small repeat user base so a browser installation is no problem at all. Is there any plugin technology I could use? Java applets? Unity? Can

问题 I've been working on a raymarched project in three.js for a little over a year now and as the complexity has increased so has the initialization time. It can now take over 40 seconds to load the project in browser however once loaded runs at +60fps. I've tracked down the culprit function through performance tests and it seems to get hung up on the InitMaterial function within three's library. Does anyone have any idea as to what could be causing this hangup? Personally I believe it could be

问题 I tried to do this based off of this answer. This is my code: <canvas id='canvas' width='500' height='500' style='border: solid 1px black'></canvas> <script> var canvas = document.getElementById("canvas"); var gl = canvas.getContext("webgl"); var texture = gl.createTexture(); var data = new Uint8Array([128, 128, 0, 1]); var texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, data); gl.texParameteri

问题 I create my array this.kernel: it hast 48 elements and I want to pass it to my fragment shader. When i call gl.uniform3fv(gl.getUniformLocation(this.program, "kernel"), 16, this.kernel); kernel is defined in my shader: uniform vec3 kernel[16]; I get an error for not enough arguments. I already looked up the specification etc, but don't find my problem -.- void glUniform3fv( GLint location, GLsizei count, const GLfloat * value); Thanks for help €: I converted this.kernel to a float32array but

问题 I'm trying to use an FBO in a material in THREE.js. I have a GPU-based fluid simulation which outputs its final visualisation to a framebuffer object, which I would like to use to texture a mesh. Here's my simple fragment shader: varying vec2 vUv; uniform sampler2D tDiffuse; void main() { gl_FragColor = texture2D( tDiffuse, vUv ); } I am then trying to use a simple THREE.ShaderMaterial: var material = new THREE.ShaderMaterial( { uniforms: { tDiffuse: { type: "t", value: outputFBO } }, //other

问题 I am using Chrome to test some of my WebGL texture programs. According to the book 'WebGL Programming Guide', if I need to access files from my local disk, I should add the option --allow-file-access-from-files to Chrome. How do I do that? 回答1: The short answer is DON'T Open up a shell/terminal/command line and type cd path/to/htmlfiles python -m SimpleHTTPServer Then in your browser to go http://localhost:8000 If you find it's too slow consider this solution The reason you don't want to

问题 So, I was reading about clipping in this Wikipedia article. It seems pretty essential to any and all games, so, do I have to do it, or is it done automatically by Three.js, or even WebGL? Thanks! 回答1: You can pass values for the near and far clipping planes to your camera object: var camera = new THREE.PerspectiveCamera( fov, aspect, near, far ); near and far can contain values for example near = 0.1 and far = 10000 so an object which lies between these values will be rendered. EDIT: near and

问题 I have a fairly complicated architecture where I am doing most of my stuff in Three.JS but I also have a special renderer that renders directly to a raw WebGL texture. Is it possible to use this WebGL texture in a three.js "Texture"? It looks like the Three.JS texture class is just a container for an image or video or canvas, and somewhere deep in the guts of three.js it will upload that to a real webgl texture. How can I just have Three.js render my WebGL texture onto a mesh? 回答1: @Brendan's