I'm just starting out learning some Three.js. I have got a basic webgl example working.
But now that I want to get a similar example working within the THREE.js framework I have ran into trouble with texturing.
The texture is loaded with createjs preloader.
I have tried appending the htmlImageElement to the document to check that it has loaded before the material is created. And this appears fine. So I don't think my problem is creating the material before the texture has completed loading. As has been the problem for others.
Also I have tested a texture from my previous webgl example and this throws the same error, so I don't think the image used is invalid.
The quad in the example below will render as a blue square ok, but the moment I add my texture to the material is throws the error. GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1.
I have little experience with Three.js so I think the problem is around how I create the material, scene or geometry. Though I really have ran out of ideas.
I am using TypeScript.
private createPaper(): THREE.Mesh {
var paperGeo = new THREE.Geometry();
paperGeo.vertices.push(new THREE.Vector3(1, 1, 0));
paperGeo.vertices.push(new THREE.Vector3(3, 1, 0));
paperGeo.vertices.push(new THREE.Vector3(3, 3, 0));
paperGeo.vertices.push(new THREE.Vector3(1, 3, 0));
paperGeo.faces.push(new THREE.Face3(0,1,2));
paperGeo.faces.push(new THREE.Face3(2,3,0));
var img: HTMLImageElement = m.getAsset("paper0");
this.paperTex = new THREE.Texture(img, THREE.UVMapping,THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping,
THREE.LinearFilter, THREE.LinearFilter, THREE.RGBAFormat, THREE.UnsignedByteType, 0);
var paperMaterial = new THREE.MeshBasicMaterial({
map:this.paperTex, color: 0x0000dd, side: THREE.DoubleSide
});
var paper = new THREE.Mesh(paperGeo, paperMaterial);
return paper;
}
At a minimum, you need to specify UVs in geometry.faceVertexUvs[ 0 ]. But first, get it working with THREE.PlaneGeometry.
If you are creating a texture using texture = new THREE.Texture(), you need to set texture.needsUpdate = true; The alternative is to use THREE.ImageUtils.LoadTexture();
three.js r.61
Related
I'm trying to apply a texture to a planeGeometry using the three.js engine.
I should be seeing a football field, I'm actually seeing black.
If I replace the map:texture argument with color:0x80ff80, I get a field of solid green, demonstrating that the geometry is in the correct place.
The page contains an which appears in the files before any scripts. I can display that image, demonstrating that there isn't a problem with the image.
The files are being served locally by an http server.
The code I'm using to build the material and PlaneGeometry is below. Any ideas appreciated. Thank you.
function buildField( fieldLength, fieldWidth, scene) {
var image = document.getElementById("fieldTexture");
var texture = new THREE.Texture(image);
texture.minFilter = THREE.LinearFilter;
var geometry = new THREE.PlaneGeometry(fieldLength, fieldWidth, 5, 5);
var material = new THREE.MeshBasicMaterial( {map:texture, side:THREE.DoubleSide});
var field = new THREE.Mesh(geometry, material);
field.rotation.x = -Math.PI/2;
scene.add(field);
}
THREE.ImageUtils is already deprecated. (source)
Use THREE.TextureLoader().load('field.png') instead
Try this, own THREE.js methods usually work better...:
texture = THREE.ImageUtils.loadTexture('field.png');
material = new THREE.MeshBasicMaterial({map: texture});
var field = new THREE.Mesh(geometry, material);
after following 3 different guides for cube mapping in three.js, I've always encounered same errors in the console:
" ebGL: INVALID_FRAMEBUFFER_OPERATION: drawElements: attachment has a
0 dimension"
"ebGL: INVALID_FRAMEBUFFER_OPERATION: drawArrays: attachment has a 0
dimension"
"[.WebGLRenderingContext]RENDER WARNING: texture bound to texture
unit 0 is not renderable. It maybe non-power-of-2 and have
incompatible texture filtering or is not 'texture complete'"
Those three errors are repated several time in the console.
Here is a guide and a live example i've tried to emulate:
Guide 1
Live Example
Right now my code is similar to the one in the live example:
cubeCameraBottom1 = new THREE.CubeCamera(0.1, 5000, 512 );
scene.add(cubeCameraBottom1);
var provacylGeometry = new THREE.CylinderGeometry(8, 8, 70, 32, 32);
var provacylinderMaterial = new THREE.MeshPhongMaterial( { envMap: cubeCameraBottom1.renderTarget } );
provaCil = new THREE.Mesh( provacylGeometry, provacylinderMaterial );
provaCil.position.set(0,0,-20);
provaCil.castShadow = true;
cubeCameraBottom1.position = provaCil.position;
scene.add(provaCil);
and this is the render function:
function render()
{
provaCil.visible = false;
cubeCameraBottom1.updateCubeMap( renderer, scene );
provaCil.visible = true;
renderer.render( scene, camera );
}
Where am I going wrong? It looks like the cube camera is not computing textures in the right way.
How can I fix this?
Thanks in advance
In the example they used r60. Just maybe that's the Problem, and maybe this can help you:
https://www.khronos.org/registry/webgl/extensions/WEBGL_lose_context/
I have a code:
var urls = [ 'img/effects/cloud.png','img/effects/cloud.png','img/effects/cloud.png','img/effects/cloud.png','img/effects/cloud.png','img/effects/cloud.png' ];
var textureCube = THREE.ImageUtils.loadTextureCube( urls, new THREE.CubeRefractionMapping );
var cubeMaterial3 = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube, refractionRatio: 0.98, reflectivity:0.9 } );
mesh = new THREE.Mesh( wormholeGeom, cubeMaterial3 );
scene.add(mesh);
This successfully works and inserts sphere with refraction map.
But i do not using skybox, but skysphere where is whole sky represented by one texture.
Is the way to make a refraction mapping from one texture?
Not by array of six textures?
I tried many thinks (THREE.ImageUtils.loadTexture,THREE.SphericalRefractionMapping too) but no luck.
Documentation is "TODO".
This is my goal, but with one texture in skydome. There are used 6 textures in square to make sky.
I'm using an image in a canvas element as a texture in Three.js, performing image manipulations on the canvas using JavaScript, and then calling needsUpdate() on the texture. This works, but it's quite slow.
I'd like to perform the image calculations in a fragment shader instead. I've found many examples which almost do this:
Shader materials: http://mrdoob.github.io/three.js/examples/webgl_shader2.html This example shows image manipulations performed in a fragment shader, but that shader is functioning as the fragment shader of an entire material. I only want to use the shader on a texture, and then use the texture as a component of a second material.
Render to texture: https://threejsdoc.appspot.com/doc/three.js/examples/webgl_rtt.html This shows rendering the entire scene to a WebGLRenderTarget and using that as the texture in a material. I only want to pre-process an image, not render an entire scene.
Effects composer: http://www.airtightinteractive.com/demos/js/shaders/preview/ This shows applying shaders as a post-process to the entire scene.
Edit: Here's another one:
Render to another scene: http://relicweb.com/webgl/rt.html This example, referenced in Three.js Retrieve data from WebGLRenderTarget (water sim), uses a second scene with its own orthographic camera to render a dynamic texture to a WebGLRenderTarget, which is then used as a texture in the primary scene. I guess this is a special case of the first "render to texture" example listed above, and would probably work for me, but seems over-complicated.
As I understand it, ideally I'd be able to make a new framebuffer object with its own fragment shader, render it on its own, and use its output as a texture uniform for another material's fragment shader. Is this possible?
Edit 2: It looks like I might be asking something similar to this: Shader Materials and GL Framebuffers in THREE.js ...though the question doesn't appear to have been resolved.
Render to texture and Render to another scene as listed above are the same thing, and are the technique you want. To explain:
In vanilla WebGL the way you do this kind of thing is by creating a framebuffer object (FBO) from scratch, binding a texture to it, and rendering it with the shader of your choice. Concepts like "scene" and "camera" aren't involved, and it's kind of a complicated process. Here's an example:
http://learningwebgl.com/blog/?p=1786
But this also happens to be essentially what Three.js does when you use it to render a scene with a camera: the renderer outputs to a framebuffer, which in its basic usage goes straight to the screen. So if you instruct it to render to a new WebGLRenderTarget instead, you can use whatever the camera sees as the input texture of a second material. All the complicated stuff is still happening, but behind the scenes, which is the beauty of Three.js. :)
So: To replicate a WebGL setup of an FBO containing a single rendered texture, as mentioned in the comments, just make a new scene containing an orthographic camera and a single plane with a material using the desired texture, then render to a new WebGLRenderTarget using your custom shader:
// new render-to-texture scene
myScene = new THREE.Scene();
// you may need to modify these parameters
var renderTargetParams = {
minFilter:THREE.LinearFilter,
stencilBuffer:false,
depthBuffer:false
};
myImage = THREE.ImageUtils.loadTexture( 'path/to/texture.png',
new THREE.UVMapping(), function() { myCallbackFunction(); } );
imageWidth = myImage.image.width;
imageHeight = myImage.image.height;
// create buffer
myTexture = new THREE.WebGLRenderTarget( width, height, renderTargetParams );
// custom RTT materials
myUniforms = {
colorMap: { type: "t", value: myImage },
};
myTextureMat = new THREE.ShaderMaterial({
uniforms: myUniforms,
vertexShader: document.getElementById( 'my_custom_vs' ).textContent,
fragmentShader: document.getElementById( 'my_custom_fs' ).textContent
});
// Setup render-to-texture scene
myCamera = new THREE.OrthographicCamera( imageWidth / - 2,
imageWidth / 2,
imageHeight / 2,
imageHeight / - 2, -10000, 10000 );
var myTextureGeo = new THREE.PlaneGeometry( imageWidth, imageHeight );
myTextureMesh = new THREE.Mesh( myTextureGeo, myTextureMat );
myTextureMesh.position.z = -100;
myScene.add( myTextureMesh );
renderer.render( myScene, myCamera, myTexture, true );
Once you've rendered the new scene, myTexture will be available for use as a texture in another material in your main scene. Note that you may want to trigger the first render with the callback function in the loadTexture() call, so that it won't try to render until the source image has loaded.
I have a mesh that I load as a .dae (collada). However, my texture file is separate (as a PNG)
Currently, my loading code is
loader.load("./assets/map_tutorial.dae", function(collada) {
var terrain = collada.scene.children[0];
var texture = new THREE.ImageUtils.loadTexture("./assets/map_tutorial_tex.png");
terrain.rotation.x = Math.PI / 2;
terrain.rotation.y = Math.PI;
scene.add(terrain);
console.log("There are " + collada.scene.children.length + " meshes!");
});
However, I'm uncertain as to how to apply the texture to my mesh (terrain)
Thanks in advance!
You will definitely have to create new material object from your texture. Assuming you want lambert, it would be like this:
var material = new THREE.MeshLambertMaterial( { map:texture } );
I am not familiar with collada loader, but it seems that it already created a mesh for you. In this case I am not sure whether you can change material of this mesh. What should definitely work is to create new mesh from geometry that you loaded from .dae file and material that you created from png image.
var mesh = new THREE.Mesh( terrain.geometry, material );
scene.add( mesh );
I hope this helps, normally I use three.js native JSON model files where this approach is working. Difference is that THREE.JSONLoader gives you two objects for your usage: geometry and materials. Collada loader seems to provide you with already created mesh so try to change it's geometry if possible or "steal" the geometry from this mesh and create a new one like I did in the example.