texgen.js 시작하기 + 생성 된 텍스처를 three.js에서 사용
요전날 FIC와 2015 에서, three.js의 작자로서 알려진 Mr.doob 일 리카르도 카벨로씨의 강연을 (들)물어 왔습니다.
거기서 신작 js 라이브러리 texgen.js가 소개되고 있어 재미있을 것 같아서 만져 보았습니다.
texgen.js는 이름대로 텍스처를 생성하는 js 라이브러리로 이미지 데이터 없이 가볍고 복잡한 텍스처를 생성할 수 있습니다.
생성된 텍스처를 three.js의 3D 객체에 붙여넣는 방법도 소개합니다.
샘플을 사용해보십시오
Mr.doob의 github 에서 clone 해 봅시다.
$git clone https://github.com/FukurouLabo/circuit-app-search.git
먼저 texgen.js/example/index.html을 브라우저에서 열어 보겠습니다.
아래와 같은 화면이 표시됩니다.
무려 이것들은, 전혀 화상 파일을 사용하지 않고 texgen.js로 생성하고 있는 것 같습니다.
그런 다음 texgen.js/editor/index.html을 열어 보겠습니다.
뭔가 UI 같네요.
시도에 왼쪽 버튼을 적당히 터치하면 오른쪽 화면에 2D와 3D로 그래픽이 표시됩니다.
이것은 텍스처 편집기처럼 보였습니다.
게다가 오른쪽 하단에 표시되는 소스 코드를 복사하면 표시되는 텍스처를 그대로 사용할 수있는 것 같습니다. 편리하네요!
생성된 텍스처를 표시해 보기
시험에 위와 같은 오리지날 텍스처를 만들어 보았습니다.
오른쪽 하단의 코드를 복사하면 그대로 사용할 수 있을 것입니다.
방금 전의 texgen.js/example/index.html을 참고로 써 갑니다.
texgen2d.html<!DOCTYPE html>
<html lang="en">
<head><title>texgen.js</title></head>
<body>
<script src="../src/TexGen.js"></script>
<script>
//script内はエディタのコピペです
var texture = new TG.Texture( 256, 256 )
.add( new TG.Checkerboard().size( 8, 64 ).offset( 0, 0 ).rowShift( 0 ) )
.add( new TG.SinX().frequency( 0.16 ).offset( 0 ) )
.add( new TG.Noise() )
.add( new TG.Pixelate().size( 1, 1 ) )
.toCanvas();
</script></body></html>
즉시 열어 보겠습니다.
뭔가 오류가 발생했습니다.
샘플 코드와 비교해 보았더니 여기가 이상하네요.
.add( new TG.Checkerboard().size( 8, 64 ).offset( 0, 0 ).rowShift( 0 ) )
Checkerboard 대신 CheckerBoard가 맞습니다.
.add( new TG.CheckerBoard().size( 8, 64 ).offset( 0, 0 ).rowShift( 0 ) )
여기를 고치면 움직였습니다.
에디터에 표시된 코드를 복사 한 것뿐이므로 에디터의 버그가 남아있는 것 같습니다.
그런 다음 텍스처 요소에 tint라는 매개 변수를 추가하면 색이 붙어있는 것 같습니다.
.add( new TG.SinX().frequency( 0.16 ).offset( 0 ).tint( 0.5, 0, 0 ) )
three.js에서 텍스처를 사용해보기
texgen.js에서 생성한 텍스처를 three.js의 3D 객체에 붙여 봅시다.
텍스처를 canvas 요소에 붙여 three.js에서 참조하는 것으로 할 수 있습니다.
이것은 texgen이라기보다 three.js 측에서 canvas 요소를 취득하는 것이 상당히 까다롭습니다만, 본고는 texgen의 소개이므로 thre 주위는 할애합니다.
texgen3d.html<!DOCTYPE html>
<html lang="en">
<head><title>texgen.js</title></head>
<body>
<canvas id= "texture"></canvas>
<script src="../src/TexGen.js"></script>
<script src="../editor/ext/three.min.js"></script>
<script>
var texture = new TG.Texture( 256, 256 )
.add( new TG.CheckerBoard().size( 8, 64 ).offset( 0, 0 ).rowShift( 0 ) )
.add( new TG.SinX().frequency( 0.16 ).offset( 0 ).tint( 0.5, 0, 0 ) )
.add( new TG.Noise() )
.add( new TG.Pixelate().size( 1, 1 ) )
var canvas = document.getElementById('texture');
canvas.width = 256;
canvas.height = 256;
ctx = canvas.getContext('2d');
ctx.putImageData( texture.toImageData( ctx ), 0, 0 );
var scene = new THREE.Scene();
var geometry = new THREE.BoxGeometry(10,10,10);
var material = new THREE.MeshBasicMaterial({
color: 0xffffff,
transparent: true,
map: new THREE.Texture( document.getElementById("texture"))
});
var cube = new THREE.Mesh(geometry, material);
cube.material.map.needsUpdate = true;
scene.add(cube);
var camera = new THREE.PerspectiveCamera(45, 1, 1, 1000 );
camera.position.set(0, 10, 20);
camera.lookAt(cube.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(256, 256);
renderer.setClearColor(0xffffff, 1);
document.body.appendChild(renderer.domElement);
function render(){
requestAnimationFrame(render);
cube.rotation.y += Math.PI / 100;
renderer.render(scene, camera);
}
render();
</script></body></html>
제대로 표시되었습니다.
끝에
FITC에서는 texgen.js 외에 frame.js이라는 라이브러리도 소개되었습니다. 무려 three.js의 3D 애니메이션 편집기!
라는 것으로 이쪽도 만져 보았습니다만, 아직 개발중답게 움직이는 방법을 잘 모르는・・・
그러나 이것은 앞으로도 필수 체크입니다.
가까이 나올 Unity5도 WebGL 대응이라고 하는 것으로, 2015년 후반은 WebGL계 쿠마가 지금까지 이상으로 뜨거워질 것 같네요!
그럼 또.
Reference
이 문제에 관하여(texgen.js 시작하기 + 생성 된 텍스처를 three.js에서 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/joytomo/items/456dea907cfa3eef1e69
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
$git clone https://github.com/FukurouLabo/circuit-app-search.git
시험에 위와 같은 오리지날 텍스처를 만들어 보았습니다.
오른쪽 하단의 코드를 복사하면 그대로 사용할 수 있을 것입니다.
방금 전의 texgen.js/example/index.html을 참고로 써 갑니다.
texgen2d.html
<!DOCTYPE html>
<html lang="en">
<head><title>texgen.js</title></head>
<body>
<script src="../src/TexGen.js"></script>
<script>
//script内はエディタのコピペです
var texture = new TG.Texture( 256, 256 )
.add( new TG.Checkerboard().size( 8, 64 ).offset( 0, 0 ).rowShift( 0 ) )
.add( new TG.SinX().frequency( 0.16 ).offset( 0 ) )
.add( new TG.Noise() )
.add( new TG.Pixelate().size( 1, 1 ) )
.toCanvas();
</script></body></html>
즉시 열어 보겠습니다.
뭔가 오류가 발생했습니다.
샘플 코드와 비교해 보았더니 여기가 이상하네요.
.add( new TG.Checkerboard().size( 8, 64 ).offset( 0, 0 ).rowShift( 0 ) )
Checkerboard 대신 CheckerBoard가 맞습니다.
.add( new TG.CheckerBoard().size( 8, 64 ).offset( 0, 0 ).rowShift( 0 ) )
여기를 고치면 움직였습니다.
에디터에 표시된 코드를 복사 한 것뿐이므로 에디터의 버그가 남아있는 것 같습니다.
그런 다음 텍스처 요소에 tint라는 매개 변수를 추가하면 색이 붙어있는 것 같습니다.
.add( new TG.SinX().frequency( 0.16 ).offset( 0 ).tint( 0.5, 0, 0 ) )
three.js에서 텍스처를 사용해보기
texgen.js에서 생성한 텍스처를 three.js의 3D 객체에 붙여 봅시다.
텍스처를 canvas 요소에 붙여 three.js에서 참조하는 것으로 할 수 있습니다.
이것은 texgen이라기보다 three.js 측에서 canvas 요소를 취득하는 것이 상당히 까다롭습니다만, 본고는 texgen의 소개이므로 thre 주위는 할애합니다.
texgen3d.html<!DOCTYPE html>
<html lang="en">
<head><title>texgen.js</title></head>
<body>
<canvas id= "texture"></canvas>
<script src="../src/TexGen.js"></script>
<script src="../editor/ext/three.min.js"></script>
<script>
var texture = new TG.Texture( 256, 256 )
.add( new TG.CheckerBoard().size( 8, 64 ).offset( 0, 0 ).rowShift( 0 ) )
.add( new TG.SinX().frequency( 0.16 ).offset( 0 ).tint( 0.5, 0, 0 ) )
.add( new TG.Noise() )
.add( new TG.Pixelate().size( 1, 1 ) )
var canvas = document.getElementById('texture');
canvas.width = 256;
canvas.height = 256;
ctx = canvas.getContext('2d');
ctx.putImageData( texture.toImageData( ctx ), 0, 0 );
var scene = new THREE.Scene();
var geometry = new THREE.BoxGeometry(10,10,10);
var material = new THREE.MeshBasicMaterial({
color: 0xffffff,
transparent: true,
map: new THREE.Texture( document.getElementById("texture"))
});
var cube = new THREE.Mesh(geometry, material);
cube.material.map.needsUpdate = true;
scene.add(cube);
var camera = new THREE.PerspectiveCamera(45, 1, 1, 1000 );
camera.position.set(0, 10, 20);
camera.lookAt(cube.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(256, 256);
renderer.setClearColor(0xffffff, 1);
document.body.appendChild(renderer.domElement);
function render(){
requestAnimationFrame(render);
cube.rotation.y += Math.PI / 100;
renderer.render(scene, camera);
}
render();
</script></body></html>
제대로 표시되었습니다.
끝에
FITC에서는 texgen.js 외에 frame.js이라는 라이브러리도 소개되었습니다. 무려 three.js의 3D 애니메이션 편집기!
라는 것으로 이쪽도 만져 보았습니다만, 아직 개발중답게 움직이는 방법을 잘 모르는・・・
그러나 이것은 앞으로도 필수 체크입니다.
가까이 나올 Unity5도 WebGL 대응이라고 하는 것으로, 2015년 후반은 WebGL계 쿠마가 지금까지 이상으로 뜨거워질 것 같네요!
그럼 또.
Reference
이 문제에 관하여(texgen.js 시작하기 + 생성 된 텍스처를 three.js에서 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/joytomo/items/456dea907cfa3eef1e69
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html lang="en">
<head><title>texgen.js</title></head>
<body>
<canvas id= "texture"></canvas>
<script src="../src/TexGen.js"></script>
<script src="../editor/ext/three.min.js"></script>
<script>
var texture = new TG.Texture( 256, 256 )
.add( new TG.CheckerBoard().size( 8, 64 ).offset( 0, 0 ).rowShift( 0 ) )
.add( new TG.SinX().frequency( 0.16 ).offset( 0 ).tint( 0.5, 0, 0 ) )
.add( new TG.Noise() )
.add( new TG.Pixelate().size( 1, 1 ) )
var canvas = document.getElementById('texture');
canvas.width = 256;
canvas.height = 256;
ctx = canvas.getContext('2d');
ctx.putImageData( texture.toImageData( ctx ), 0, 0 );
var scene = new THREE.Scene();
var geometry = new THREE.BoxGeometry(10,10,10);
var material = new THREE.MeshBasicMaterial({
color: 0xffffff,
transparent: true,
map: new THREE.Texture( document.getElementById("texture"))
});
var cube = new THREE.Mesh(geometry, material);
cube.material.map.needsUpdate = true;
scene.add(cube);
var camera = new THREE.PerspectiveCamera(45, 1, 1, 1000 );
camera.position.set(0, 10, 20);
camera.lookAt(cube.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(256, 256);
renderer.setClearColor(0xffffff, 1);
document.body.appendChild(renderer.domElement);
function render(){
requestAnimationFrame(render);
cube.rotation.y += Math.PI / 100;
renderer.render(scene, camera);
}
render();
</script></body></html>
FITC에서는 texgen.js 외에 frame.js이라는 라이브러리도 소개되었습니다. 무려 three.js의 3D 애니메이션 편집기!
라는 것으로 이쪽도 만져 보았습니다만, 아직 개발중답게 움직이는 방법을 잘 모르는・・・
그러나 이것은 앞으로도 필수 체크입니다.
가까이 나올 Unity5도 WebGL 대응이라고 하는 것으로, 2015년 후반은 WebGL계 쿠마가 지금까지 이상으로 뜨거워질 것 같네요!
그럼 또.
Reference
이 문제에 관하여(texgen.js 시작하기 + 생성 된 텍스처를 three.js에서 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/joytomo/items/456dea907cfa3eef1e69텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
