p5.js가 WebGL&3D 대응. 가볍게 만져 보겠습니다.

수수하게 확장되는 p5.js. 오랜만에 워치 해 보면 2015/10/05의 릴리스로 WebGL 대응하고 있어, 거기에 따라 3D의 서포트도 시작한 것 같습니다. 다른 라이브러리에는 여러가지 끝을 넘어가고 있다고 생각합니다만, 만져 보았습니다.

마지막은 시간이 없었기 때문에 간단한 UFO 만들고 종료

기본 템플릿

보는 곳은 공식 사이트의 튜토리얼, 나머지는 레퍼런스에는 거기에 실리지 않는 구현이 있었습니다. 우선 기본 템플리
p5 패키지 샘플 파일의 코멘트 시작 부분에 Shiffman 사이트에 대한 링크가. 홍보입니다.

// Learning Processing
// Daniel Shiffman
// http://www.learningprocessing.com

// Example 1-1: stroke and fill

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
}

function draw(){
  background(255);
  box();
}

결과


···? 2D인가?
분명 카메라가 있을 것이다. 라고 생각하면서・・・

돌리면 ...

function setup(){
  createCanvas(windowWidth, windowHeight, WEBGL);
}

function draw(){
  background(200);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  box(200, 200, 200);
}

움직였다


frameCount(= 앞으로 나온 프레임 수에 따라 증가)
windowWidth(브라우저의 가로폭)
windowHeight(세로폭)
낯선 편리한 변수가 나왔습니다. 전 없었던 생각이 든다··

아무래도 글로벌 공간은 점점 오염해 갈 방침인 것 같습니다. 플레이그라운드 용도에 특화군요. 음, 그것도 좋다고 생각합니다.
※2015/12/22 주※
글로벌 오염은 회피 가능한 것으로 밝혀졌습니다.
p5.js를 instance mode에서 사용
ぃ tp // 이 m / 쓰루 스케 / ms / c92 13602523d6378 c0

프리미티브 입체 집결 & 작은 재료

레퍼런스에 살짝 들어갔습니다만, draw 안에 「orbitControl();」라고 넣으면 드래그로 카메라를 움직일 수 있게 됩니다. Three 영감 가나
입체를 집결시킬 때, 그대로와 겹치므로, translate로 좌표를 어긋나게 합니다. 이것은 바로 Processing 스타일. 코드 짧은 ~.

function setup(){
  createCanvas(windowWidth, windowHeight, WEBGL);
}

function draw(){

  //ドラッグでカメラ動かす
  orbitControl();

  //ボックス（立方体）
  box(50, 50, 50);

  //動け
  translate(200,200,-100);
  //コーン（三角錐）
  cone(100, 100);

  //プレーン（平面）
  translate(-150,200,-200);
  rotateX(radians(-90)); //-90度回転
  plane(500, 500);

  //スフィア（球）
  sphere(200);

  //シリンダー（円柱）
  translate(-350,100,150);
  rotateX(radians(-90)); //-90度回転
  cylinder(100, 100);

  //トーラス（ドーナツ）
  translate(0,0,350);
  torus(200, 60);

}

전학생들. 멋지다.

카메라와 조명

길어졌기 때문에, 소개만 합니다.
참조에 구현이 있습니다. htp // p5js. 오 rg / 레후 렌세 /
Three.js,Unity와 같은 스타일을 답습하는 것 같습니다. 재산은 그들을하고 있다면 말할 필요도 없을 것입니다 (둥근 던지기)

카메라 종류
・심플 카메라
camera(x,y,z)

・퍼스펙티브(투시 투영) 카메라
perspective(fovy, aspect, near, far)

・오소그래픽(정투영) 카메라
ortho(left, right, bottom, top, near, far)

빛의 종류
・앰비언트 라이트(환경광)
・디렉셔널 라이트
・포인트 라이트

텍스처 붙이기

이미지 파일의 원본 정책으로 인해 로컬 이미지를 사용할 수 없습니다.
여기서 python -m SimpleHTTPServer 의 등장.

var img;

function setup(){
  createCanvas(windowWidth, windowHeight, WEBGL);
  img = loadImage("sc.png");
}

function draw(){
  texture(img);

  // ... 以下同 ...
}

붙일 수 있었습니다. 짧지.

머티리얼과 라이트를 결합

마우스의 좌표에 맞추어 디렉셔널 라이트를 맞춥니다. 그것에 호응해 주도록(듯이), 머티리얼을 세트 합니다. 이것도 Processing 같은 프로세스입니다.

function setup(){
  createCanvas(windowWidth, windowHeight, WEBGL);
}

function draw(){

  //マウスの座標
  var dirY = (mouseY / height - 0.5) *2;
  var dirX = (mouseX / width - 0.5) *2;

  //マウスに合わせてライト強弱
  directionalLight(250, 250, 250, dirX, -dirY, 0.25);

  //マテリアルをセット
  ambientMaterial(250);

  // ... 以下同 ...
}

표현해보자

마무리로 뭔가 표현해 보겠습니다.
도넛과 구에서 UFO, + 시간에 맞추어 빛의 깜박임. 슬슬 자야 돼서 w

돈.


시간 경과와 삼각 함수에 관해서는 ↓의 기사에 썼습니다
미디어 아트 시스템에서 중요한 수식 · 개념 & p5.js에서 재생
ぃ tp // 이 m / hp 0 / ms / 8f43 d146744310664

function setup(){
  createCanvas(windowWidth, windowHeight, WEBGL);
}

function draw(){

  orbitControl();

  //時間ライト＆マテリアル
  var intensity = Math.sin(frameCount * 0.1);
  directionalLight(250, 250, 250, intensity, intensity, 0.25);
  ambientMaterial(250);

  //地面
  translate(0,300,-200);
  rotateX(radians(-90)); //-90度回転
  plane(500, 500);

  //UFO
  var x =  Math.cos(frameCount * 0.03) * 300;
  var y =  Math.sin(frameCount * 0.06) * 300;
  translate(x,y,300);
  torus(200, 60);
  translate(0,0,100);
  sphere(150);

}

주요 정보원

다음 두 가지에 거의 모든 정보가 있습니다.
공식 튜토리얼(github)
htps : // 기주 b. 이 m/p 여드름 g/p5. js / ぃ き / 갓찐 g - s r d u ぃ th ぇ bGL - an - p5
공식 참조
htp // p5js. 오 rg / 레후 렌세 /

감상

꽤 인스턴트에 3D 시각화가 가능했습니다. Processing인 것 같습니다. 그리고는 무엇을 만들까요. 하지만 Three가 있으니까.
커스텀 쉐이더에는 향후 대응 예정인 것 같습니다.